Question

我有一些代码可以打印输入字段中输入的文本。我想要它，以便当按下return / enter时它会断开一个新行。

还有代码。

    <h3>Your Text:</h3>
    <input id="input" maxlength="50" type="text" name="Text" value="Max. 50 characters">
    <div id="container">
        <p id="text">Your words here</p>
    </div>

    $(document).ready (function() {

$('#input').keyup(function() {
        $('#text').html($(this).val());
});

});

Answer 1

使用textarea并设置p特定的CSS规则：

$(document).ready(function () {

    $('#input').keyup(function () {
        $('#text').html(this.value);
    });

});

#text {
    white-space: pre-line;
    /* collapse WS, preserve LB */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Your Text:</h3>

<textarea id="input" maxlength="50" name="Text" value="Max. 50 characters"></textarea>
<div id="container">
    <p id="text">Your words here</p>
</div>

Answer 2

使用textarea进行多行输入输入时默认提交表单上的输入元素。

Answer 3

将输入类型文本更改为textarea它将起作用

Answer 4

使用textarea代替输入并使用<pre> element包装.val（）值，如下所示：

$(document).ready(function() {
  $('#input').click(function() {
    $(this).val('');
  });
  $('#input').keyup(function() {
    $('#text').html("<pre>" + $(this).val() + "<pre>");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Your Text:</h3>
<textarea id="input" maxlength="50" style="resize:none;height:18px;">Max. 50 characters</textarea>
<div id="container">
  <p id="text">Your words here</p>
</div>

Answer 5

嗯，这取决于你想要对内容做什么。如果您只想在文本字段中显示多行，则需要一个文本区域，因为文本字段仅供单行使用。如果要将文本插入文本字段，则需要在文本中添加breakline标记，如下所示：

$('#input').keypress(function(e){
    if(e.which == 13){
        var newText= $(this).val() + '<br>';
        //doStuff with newText
    }
});

出于其他目的，您可能会考虑将'\n'附加到字符串而不是'<br>'。但这真的取决于你的目的

Answer 6

如果你想保留输入字段，你应该像这样添加br值

$(document).ready(function() {

  $('#input').keyup(function(e) {

    if (e.keyCode == 13) {
      $(this).val($(this).val() + '<br/>');
    }
    $('#text').html($(this).val());
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Your Text:</h3>

<input id="input" maxlength="50" type="text" name="Text" value="Max. 50 characters">
<div id="container">
  <p id="text">Your words here</p>
</div>

Answer 7

每个输入的新行

这里jsfiddle为你http://jsfiddle.net/8khbz0zc/17/

$('#input').keyup(function(e) {
  $('.text').last().html($(this).val());
  if (e.keyCode == 13) {
    $("#container").append('<p class="text"></p>');
    $(this).val('');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Your Text:</h3>
<input id="input" maxlength="50" type="text" name="Text" placeholder="Max. 50 characters" value="">
<div id="container">
  <p class="text">
    Your words here</p>

</div>

当按下return时，jQuery会打破一个新行

7 个答案: