web-dev-qa-db-ja.com

textareaのテキストを改行付きでdivにコピーする

JQueryでkeyup()を使用して簡単な効果を作成しようとしています。ユーザーがtextareaに入力すると、ユーザーが入力したテキストが.contentという名前の別のdivにコピーされるようにしたいだけです。押すと enter 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>
javascriptjqueryhtmltextarea
12
Kamal

DIVで適切に出力するには、リテラル改行を<br>タグに変換する必要があります。

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

以下のコードに示されています：

    $('.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
        
    });
<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>

JSFiddle

17
SmokeyPHP

white-space: pre-wrapルールをdivのCSSに追加します。

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

デモ： http://jsfiddle.net/Pqygp/13/

35
JJJ

次の行を使用します： Fiddle

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

問題は、改行がhtmlに改行を作成しないことでしたが、<br>意志。

5
Dallas

次のようにしてみてください

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

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

これは [〜＃〜]デモ[〜＃〜]

1
Gautam3164

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}
    />
  );
}
0
dominik791