Блог

Главная - Вопросы по программированию - Переместить нажатую букву из одного ввода в другой

Переместить нажатую букву из одного ввода в другой

#javascript #jquery

#javascript #jquery

Вопрос:

Как я могу получить нажатую букву из входных данных и переместить эту букву на другой вход с помощью jquery? Но я хочу, чтобы она ПЕРЕМЕЩАЛАСЬ в другой, а не копировалась или что-то в этом роде. УДАЛИТЬ из исходного ввода и ПОМЕСТИТЬ в другой.

Например:

 <input id="txt1" type="text">
<input id="txt2" type="text">
<script>
  $('#txt1').on('input', function(evt) {
    //get key pressed (txt1) and move to another input (txt2)
  });
</script>

Ответ №1:

Вам нужно добавить ввод #txt1 к значению второго, а затем сохранить только начальное значение:

 let len = $('#txt1').val().length;
$('#txt1').on('input', function(evt) {
    if($(this).val().length < len){ //delete
         len = $(this).val().length;
         return;
    }
    let val1 = $(this).val();
    if(val1.length > 1) 
         val1 = val1.charAt(val1.length-1);
    let val2 = $('#txt2').val();
    $('#txt2').val(val2   val1);
    len = $(this).val().length-1;
    $(this).val( $(this).val().substring(0,len) );
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input id="txt1" type="text" value="hello">
<input id="txt2" type="text">

Комментарии:

1. отлично, это работает.. но теперь у меня другой вопрос.. что, если исходный ввод уже имеет некоторое значение, я нажимаю другую клавишу и хочу, чтобы только эта последняя нажатая клавиша была перемещена на другой ввод, а не все в исходном вводе?

2. @Andre Я добавил этот случай к ответу. Вы хотите, чтобы начальное значение было удалено или его сохранили?

3. Я хочу сохранить начальное значение, просто переместите последний добавленный символ

4. @Andre Я обновил ответ. Удаление из начального значения также не влияет на добавление.

Ответ №2:

Проще всего использовать val(function) который предоставляет текущее значение в обратном вызове

 $('#txt1').on('input', function(evt) {    
    $('#txt2').val((_, v) => v   this.value);
    this.value = '';
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input id="txt1" type="text" value="hello">
<input id="txt2" type="text">