Question

我想在jQuery中使用keyup()来做一个简单的效果。我只是希望当用户输入textarea时，那么用户类型将复制到另一个名为.content的div的文本。当我在textarea中按输入时，会创建一个新行，但在我的div中，文本显示在同一行中。我的代码如下，您可以在此处查看演示：http://jsfiddle.net/Pqygp/

    $('.content:not(.focus)').keyup(function(){					
        var value = $(this).val();
        var contentAttr = $(this).attr('name');
        
        $('.'+contentAttr+'').html(value);
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="mas" rows="15" class="content"></textarea>
    <p>&nbsp;</p>
    <div class="mas" >Texts Comes here</div>

Answer 1

在div的CSS中添加white-space: pre-wrap规则。

.mas {
    white-space: pre-wrap;
}

演示：http://jsfiddle.net/Pqygp/13/

Answer 2

您需要将文字换行符转换为<br>标记，以便在DIV中输出正确的内容。

$('.'+contentAttr+'').html(value.replace(/\r?\n/g,'<br/>'));

在下面的代码中显示：

＆＃13;

    $('.content:not(.focus)').keyup(function(){					
                                    
                                    
        var value = $(this).val();
        var contentAttr = $(this).attr('name');
        
        $('.'+contentAttr+'').html(value.replace(/\r?\n/g,'<br/>')); //convert newlines into <br> tags
        
    });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea name="mas" rows="15" class="content"></textarea> <p>&nbsp;</p> <div class="mas" >Texts Comes here</div>

＆＃13;

JSFiddle

Answer 3

使用以下行：Fiddle

$('.'+contentAttr+'').html(value.replace(/\n/g,"<br>"));

问题是换行不会在html中创建换行符，但<br>会出现换行符。

Answer 4

尝试

var value = $(this).();
var contentAttr = $(this).attr('name');

$('.'+contentAttr+'').html(value.replace(/\r?\n/g,"<br>"));

这是DEMO

Answer 5

如果您使用React：

render() {
  const nbOfTextareaRows = this.state.textareaValue.split('\n').length;

  return (
    <textarea
      value={this.state.textareaValue}
      onChange={e => this.setState({ textareaValue: e.target.value })}
      rows={nbOfTextareaRows}
    />
  );
}

使用换行符将textarea的文本复制到div中

5 个答案: