Блог

Главная - Вопросы по программированию - Обновлять текст TextBox2 при вводе текста в TextBox1

Обновлять текст TextBox2 при вводе текста в TextBox1

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть 2 текстовых поля (например, конвертер валют)

Я хочу обновить textbox2 при вводе текста в textbox1, какую функцию jquery мне следует использовать?

 CREDIT: <input type="text" id="credit"/>

USD: <input type="text" id="usd"/>

Jquery — Запрос: 

     $("#credit").change(function () {
           $("#usd").val((parseInt($("#credit").val(), 10) * 2));
    });

http://jsfiddle.net/9ysC3/

Прямо сейчас значение usd обновляется из-за потери фокуса.

Какую функцию я могу использовать для обновления значения в долларах США при вводе в текстовое поле credit?

Ответ №1:

Вы не должны использовать событие «изменить», а скорее событие «ввод», чтобы узнать, изменилось ли содержимое.

 $("#credit").on('input', function () {
       $("#usd").val((parseInt($(this).val(), 10) * 2));
});

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

1. Спасибо! Это именно то, что я искал. Ценю это.

2. Не забудьте принять ответ, если это то, что вам было нужно 🙂

3. keyup вызовет событие при нажатии любых клавиш (даже ctrl, shift и т.д.). input Событие будет срабатывать только при изменении содержимого, поэтому оно более подходит для вашей ситуации.

Ответ №2:

input Событие намного более всеобъемлющее / отзывчивое, чем change событие:

 $("#credit").on('input', function () {
    $( "#usd" ).val(  this.value * 2 );
});

РАБОЧАЯ ДЕМОНСТРАЦИЯ JSFIDDLE

Вы также можете настроить свою разметку, чтобы она могла выполнять некоторую проверку:

 CREDIT:
<input type="number" id="credit" />
<br/>USD:
<input type="number" id="usd" readonly="readonly" />

Ответ №3:

Используйте это: http://jsfiddle.net/9ysC3/2 /

 $("#credit").keypress(function () {
$("#usd").val((parseInt($("#credit").val(), 10) * 2));
});

On keyup так же эффективен.

Ответ №4:

Как написано в ответе aa333, но замените нажатие клавиши на keyup, чтобы сделать обновление более отзывчивым:

 $("#credit").keypress(function () {
  $("#usd").val((parseInt($("#credit").val(), 10) * 2));
});