web-dev-qa-db-fra.com

Le .val () d'une nouvelle traduction ne prend pas en compte les nouvelles lignes

La propriété .val() d'un élément de jQuery pour un <textarea> ne semble pas fonctionner avec de nouvelles lignes. J'ai besoin de cette fonction car la zone de texte est censée reconnaître la touche Entrée et l'afficher en tant qu'aperçu, avec la nouvelle ligne in tact.

Cependant, ce qui se passe est indiqué dans ce violon: http://jsfiddle.net/GbjTy/1/ . Le texte est affiché, mais pas dans une nouvelle ligne.

Comment puis-je obtenir l'aperçu en incluant de nouvelles lignes, et je sais que c'est possible, car cela apparaît dans l'aperçu Stack Overflow Post Question.

Merci.

P.S J'ai vu d'autres liens sur SO à ce sujet, mais ils disent tous que l'utilisateur final doit utiliser du code, ce qui n'est pas une méthode idéale pour moi. Comment puis-je y parvenir sans que l'utilisateur final n'écrive un code spécifique, comme ici sur SO Aperçu de la question, où la touche Entrée fonctionne comme il se doit dans l'aperçu.

jqueryhtmltextareanewlineenter
14
H Bellamy

C'est un problème de CSS, pas un problème de JavaScript. HTML réduit l'espace par défaut - ceci inclut ignorer les nouvelles lignes.

Ajoutez white-space: pre-wrap à la sortie div. http://jsfiddle.net/mattball/5wdzH/

Ceci est supporté par tous les navigateurs modernes: https://caniuse.com/#feat=css3-tabsize

37
Matt Ball

Les nouvelles lignes forcées dans textareas sont \ns, elles sont ignorées par d’autres balises HTML que textarea. Vous devez utiliser <br /> pour forcer les nouvelles lignes sur ces éléments. 

Je vous suggère d'utiliser JavaScript pour résoudre ce problème plutôt que CSS, car vous utilisez déjà JavaScript.

$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace(/\n/g, '<br />') );
});

Vous pouvez trouver la version mise à jour ici: http://jsfiddle.net/GbjTy/2/

9
js-coder

Essayez quelque chose comme ça:

$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace('\n', '<br/>') );
});

En HTML, les espaces sont ignorés par défaut.

Vous pouvez également changer votre balise <div> en une balise <pre>:

<pre id="output_div"></pre>

Et cela fonctionnerait aussi bien.

3
Mike Christensen
$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace(/[\r\n]/g, "<br />") );
});

Vous devez remplacer les caractères de nouvelle ligne par les balises <br> pour la sortie HTML.

Voici une démo: http://jsfiddle.net/GbjTy/3/

2
Jasper

Votre nouvelle ligne affiche parfaitement, mais HTML ignore les nouvelles lignes: il faut <br>.

Utilisez une simple fonction newline-to-br comme ceci:

function nl2br_js(myString) {
var regX = /\n/gi ;

s = new String(myString);
s = s.replace(regX, "<br /> \n");
return s;
}

$( "#watched_textarea" ).keyup( function() {
       $( "#output_div" ).html( nl2br_js($( this ).val()) );
    });

jsfiddle ici: http://jsfiddle.net/r5KPe/

Code d'ici: http://bytes.com/topic/javascript/answers/150396-replace-all-newlines-br-tags

2
Nanne

Dans le cas où 

  • vous N'affichez PAS le .val () de la zone de texte dans une autre page (par exemple, envoyez le formulaire à Servlet et transmettez-le à un autre JSP).

  • utiliser le .val () de textarea dans le cadre d'un encodage d'URL (par exemple, un mailto: avec un corps contenant le contenu de textarea) dans Javascript/JQuery

ensuite, vous devez URLEncode la description de textarea comme suit: 

var mailText = $('#mailbody').val().replace(/(\r\n|\n|\r)/gm, '%0D%0A');
2
RuntimeException

Il existe une solution simple: créer le conteneur avec la balise pré.

        <textarea id="watched_textarea" rows="10" cols="45">test </textarea>
        <pre class="default prettyprint prettyprinted"><code ><span class="pln" id="output_div">fdfdf</span></code></pre>
        <script>
        $("#watched_textarea").keyup(function() {
            $("#output_div").html($(this).val());
        });
        </script>
1
Sanjib Debnath

J'ai trouvé une méthode plus pratique en utilisant jQuery.

samplecode

HTML

    <textarea></textarea>
    <div></div>
    <button>Encode</button>

JS

$('button').click(function() {

    var encoded = $('<label>').text($('textarea').val()).html();//the label element can be replaced by any element like div, span or else

    $('div').html(encoded.replace(/\n/g,'<br/>'))
});
0
Nithin Chandran

J'avais essayé de définir la valeur textarea avec jquery dans le gabarit de la lame laravel, mais le code était cassé car la variable contenait de nouvelles lignes.

mon extrait de code était 

$("#textarea_id").val("{{ $php_variable }}");

J'ai résolu mon problème en modifiant mon extrait de code comme ci-dessous.

$("#textarea_id").val("{{ str_replace(array('\r', '\n', '\n\n'), '\n', $php_variable }}");

si vous êtes confrontés à ce problème, vous pouvez en tirer profit.

0
Sunil Kumar
<?php 

//$rsquery[0] is array result from my database query
//$rsquery[0] = 1.1st Procedure \n2.2nd Procedure
//txtRisks is a textarea

//sample1
function nl2br2($string) {
$string = str_replace(array("\r\n", "\r", "\n"), "<br />", $string);
return $string;
}

//sample2
function nl2br2($string) {
$string = str_replace(array("\r\n", "\r", "\n"), "\\n", $string);
return $string;
}

echo "$('#txtRisks').val('".nl2br2($rsquery[0])."')";

?>

PHP Lien manuel

0
crazyivan