准確獲取在文本框中寫入的文本

Question

我有一個用於編寫消息的文本框。 我想用 div 顯示寫在這個文本框中的文本。 我這樣做了，但只顯示文本，但格式化並不意味着當我使用 enter 編寫時，然后在預覽文本中相互顯示。 未顯示在下一行。

 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

form標簽中的name屬性已被棄用，不應使用（ 參見規范），而應使用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 2

這是 ypur 問題的近似。 認為 textarea 中的 \\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 3

您應該在返回值中用<br>替換\\n ：

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

注意：由於您使用的是 jQuery，您可以在 js 代碼中定義事件，我建議使用input事件而不是keyup因為它在跟蹤用戶輸入時效率更高

$('#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

只需使用String.replace()將 \\r\\n 更改為<br> 。 這是你在 ES6 中的做法，只需使用 var 而不是 const 並讓向后兼容

 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>