テキストボックスに書き込むテキストを正確に取得

Question

メッセージを書き込むためのテキストボックスがあります。私はこのテキストボックスに書かれたテキストをdivに表示したい。私はそれを行うが、テキストだけが表示されますが、書式設定は、プレビューテキストに入力を使用して書いたときには意味がありません。次の行には表示されません。

function limiter(){ 
 
    var tex = document.SendSms.msg.value; 
 
    $(".speech").html(tex); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form name='SendSms'> 
 
<textarea name="msg" id="msg" class="txtareabox" wrap='physical' onkeyup="limiter()" required ></textarea> 
 

 
<div id="mobilescreen"> 
 
    <div id="mobiletext"> 
 
    <p class="speech">See your preview here.. </p> 
 
    </div> 
 
</div>

Answer 1

ここではypur問題での近似です。テキストエリアの\ nを"<br/>"に変換する必要があると考えてください。ここで

https://jsfiddle.net/qu0mcsd6/

jsのコードは次のとおりです。

function addText(){ 
    var tex = document.SendSms.msg.value; 
    tex = tex.replace(/\n/g, "<br>"); 
    $(".speech").html(tex); 
} 
$('#poner').click(addText); 

おかげ

Answer 2

formタグ内name属性が廃止され、使用されるべきではない（cf. spec）、idが代わりに使用されるべきです。

function limiter() { 
    var tex = $("#msg").val(); // get the value of the form input (textarea) and store it in tex variable 
    $(".speech").html(tex); // set the value as innerHTML of the element(s) with 'speech' class 
} 

Answer 3

あなたが返す値に<br>で\nを交換する必要があります。

document.SendSms.msg.value.replace(/\n/g,"<br>"); 

がNOTE：それは、より効率的なので、あなたがjsのコード内のイベントを定義することができjQueryのを使用している、と私は代わりにkeyupのinputイベントの使用を示唆しているため、ユーザー入力を追跡

$('#msg').on('input', function(){ 
    $(".speech").html($(this).val().replace(/\n/g,"<br>")); 
}) 

・ホープ、このことができます。

$('#msg').on('input', function(){ 
 
    $(".speech").html($(this).val().replace(/\n/g,"<br>")); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="SendSms"> 
 

 
    <textarea name="msg" id="msg" class="txtareabox" wrap='physical' required ></textarea> 
 
    and the div in which i want to show my preview: 
 

 
</form> 
 

 
<div id="mobilescreen"> 
 
    <div id="mobiletext"> 
 
    <p class="speech">See your preview here.. </p> 
 
    </div> 
 
</div>

Answer 4

だけ<br>に\ r \ nを変更するString.replace()を使用しています。ここ は、あなただけの代わりにCONSTのVARを使用して

const textarea = document.querySelector("textarea"); 
 
const div = document.querySelector("div"); 
 
let text = textarea.innerHTML; 
 

 
text = text.replace(/\r?\n/g, '<br>'); 
 

 
div.innerHTML = text;

<textarea> 
 
Line 1 
 
line2 
 
line3 
 
</textarea> 
 
<div></div>