JQuery заменить строку в textarea

Question

Я пытаюсь заменить строковое значение в textarea при наборе текста в jQuery. Я использовал событие keypress, чтобы попытаться достичь этого. Что может быть проблемой здесь в этом 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, вы все равно получите только одно значение, потому что после замены «образца» оно исчезнет, ​​поэтому его нельзя заменить снова.

Необходимо учитывать новую логику, если вы хотите заменить образец на полное значение текстового поля. Рассмотрим следующий пример:

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

1. Вы хотите посмотреть на KeyUp, не нажатие (вы хотите убедиться, что вы u получите всю строку.
2. Вы пытаетесь установить значение текстового поля правильно? Вы ищете значение textarea во второй строке javascript.
3. Если вы замените образец на первый ход ключа, заменить второй ход клавиши не будет.
4. Вы можете упростить линии 3 и 4 в одну строку.
5. 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); 
});