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，您仍然只能获得一个值，因为一旦“样本”被替换，它就会消失，因此无法再次替换它。

如果您想要使用textarea的完整值替换样本，则需要考虑新的逻辑。请考虑以下示例：

$("#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>

Answer 2

您想要查找keyup，而不是keypress（您希望确保获得整个字符串。
您正试图将文本框值设置为正确吗？你正在寻找javascript第二行的textarea值。
如果您在第一个击键中替换样本，则无法替换第二个击键。
您可以将第3行和第4行简化为一行。
replace只能用于字符串。所以你需要先获得价值，如果你打算这样做的话。 txtAreaValue.val（）。replace（'sample'，$（this）.val（））;

随意在这个小提琴上玩它：http://jsfiddle.net/snlacks/abc6skp9/

$("#txtBox").on('keyup', function () {
    var txtValue = $(this).val();
    $('#txtArea').val("this is a " + txtValue);
});

如果你有一个更长的字符串，替换可能会更好，但你仍然需要在某处存储完整的字符串。

var longString = "some really long string... sample... more...";

$("#txtBox").on('keyup', function () {
    var txtValue = $(this).val();
    $('#txtArea').val(longString.replace('sample', txtValue);
});

Jquery在textarea中替换字符串

2 个答案: