javascript - 使用 text() 更改文本区域中的某些字符

Question

<input id='myTextbox1' type='text'/>
<br><br>
<textarea>Hello my name is James</textarea>

$('#myTextbox1').on('input', function() {
    $('textarea').text($(this).val());
});

我想通过将“James”一词绑定(bind)到我的输入字段来更改它。到目前为止，我陷入困境，只能更改整个文本区域。我知道我可以使用 div 来做到这一点，但是 textarea 怎么样？

Answer 1

建议使用 contentEditable div

进行此类操作

$('#myTextbox1').on('input', function() {
    $('#name').html($(this).val());
});

div[contenteditable] {
  resize: both;
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id='myTextbox1' type='text'/>
<br><br>
<div contenteditable=true>Hello my name is <span id="name">James</span></div>

这是可能的，但最好的方法是指定格式以避免复杂的字符串操作。

var format = "Hi, My name is ";
$('input').on('input',function () {
  $('textarea').val(format + $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input value="James"><br/>
<textarea>Hi, My name is James</textarea>