获取在文本框中写入的文本

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

{@ 1}}标记中的name属性已弃用，不应使用），而应使用form。

id

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

您应该在返回值中将\n替换为<br>：

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

注意：由于您正在使用jQuery，因此可以在js代码中定义事件，我建议使用input事件代替keyup跟踪用户输入时效率更高

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

希望这有帮助。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>