Блог

Главная - Вопросы по программированию - Как заставить новое входное значение автоматически и немедленно заменить старое?

Как заставить новое входное значение автоматически и немедленно заменить старое?

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть следующее input . Я нажимаю число, допустим 1 . Теперь, когда я нажимаю 2 , я хочу 2 заменить 1 .

Я уже пробовал это до сих пор:

 $("input").keyup(function(){
 var value = $(this).val();
 $(this).val(value[value.length-1]);
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text">

Как вы можете видеть, это работает, но очень глупо. Как заставить 2 немедленно заменить 1 без каких-либо задержек?
Спасибо!

Ответ №1:

Используйте input событие вместо keydown , оно срабатывает немедленно при изменении содержимого поля.

 $("input").on('input', function(){
 var value = $(this).val();
 $(this).val(value[value.length-1]);
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text">

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

1. Это работает нормально, но мне интересно, в чем разница между on('input') и input() ?

2. В jQuery есть ярлыки для нескольких событий, api.jquery.com/category/events (но я не вижу .input() там), .on является общим помощником, который можно использовать для подписки на все типы событий или даже на несколько одновременно.

Ответ №2:

Я думаю, это то, что вы искали? Вместо получения значения и замены последнего, просто очищайте ввод каждый раз, когда пользователь что-то вводит

 $("input").keydown(function(){
  $(this).val('');
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text">