javascript - Jquery替换文本区域中的字符串

Question

我正在尝试用 jquery 在文本框中键入时替换 textarea 中的字符串值。我使用按键事件来尝试实现这一目标。此 fiddle 中的问题可能是什么？

<input type="text" id="textbox" />
<textarea id="txtArea">This is a sample test.</textarea>

jquery代码

$("#textbox").keypress(function () {
    var txtAreaValue = $('#txtArea').val();
    var txtAreaValueAfterreplace = txtAreaValue.replace('sample', $(this).val());
    $('#txtArea').val(txtAreaValueAfterreplace);

});

Answer 1

主要问题是，当使用按键时，您在设置输入框之前获取输入框的值，因此什么也不会出现。然而，即使您将其更改为 keyup，您仍然只会获得一个值，因为一旦“sample”被替换，它就消失了，因此无法再次被替换。

如果您想用文本区域的完整值替换示例，则需要考虑新的逻辑。考虑以下示例:

$("#add").click( function () {
    $( '#txtArea' ).val( $('#txtArea').val().replace( 'sample',  $("#textbox").val() ) );
});

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

<input type="text" id="textbox" /><br>
<input type='button' id='add' value='add'>
<textarea id="txtArea">This is a sample test.</textarea>

或者我们在用户停止输入时替换

var typing;

$("#textbox").keyup( function () {
    // Stop the change from being made since they typed again
    clearTimeout(typing);
    
    // They typed, so set the change to queue up in a 3rd of a second
    typing = setTimeout(function(){
        $( '#txtArea' ).val( $('#txtArea').val().replace( 'sample',  $("#textbox").val() ) );
    },350);
});

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

<input type="text" id="textbox" /><br>
<textarea id="txtArea">This is a sample test.</textarea>