jQuery получает входное значение после нажатия клавиши


129

У меня есть такая функция:

$(document).ready(function() {
    $("#dSuggest").keypress(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

По какой-то причине при первом нажатии клавиши я получаю в журнале консоли пустую строку.

Ответы:


157

Это связано с тем, что keypressсобытия запускаются до того, как новый символ добавляется к valueэлементу (поэтому первое keypressсобытие запускается до того, как добавляется первый символ, а valueобъект все еще пуст). keyupВместо этого вы должны использовать , который запускается после того, как персонаж был добавлен.

Обратите внимание: если ваш элемент #dSuggestтакой же, как input:text[name=dSuggest]вы, можете значительно упростить этот код (а если это не так, наличие элемента с именем, которое совпадает с именем idдругого элемента, не является хорошей идеей).

$('#dSuggest').keypress(function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

2
Работает, но с выходом jquery 2.x это уже устарело, так как ответ ниже с использованием on и input - лучший способ сделать это сейчас.
Петр Кула

1
@ppumkin: То, что jQuery 2 отсутствует, не означает, что людям не нужно поддерживать IE8 и ниже. И я не вижу в документации ничего, что предлагало бы реальную поддержку inputтипа события.
Cookie monster

7
Вы поправите, они должны перестать поддерживать IE, точка. Большинство «обходных путей» в jQuery 1.x предназначены для IE, поэтому его действительно следует переименовать в jQuerIE.
Петр Кула

189

Понимая, что это довольно старый пост, я все равно дам ответ, поскольку боролся с той же проблемой.

"input"Вместо этого вы должны использовать событие и зарегистрироваться с помощью .onметода. Это быстро - без задержек keyupи решает последнюю описанную вами проблему с отсутствием нажатия клавиш.

$('#dSuggest').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

Демо здесь


26
Это должно быть отмечено как правильный ответ - возможно, клавиатурное нажатие решает проблему с отсутствующим символом, но проблематично определить, действительно ли символ был написан (а ключ не был, например, «tab» или «home»). +1 для вас
Наши

Проблема в том, что он не поддерживается в старых браузерах, и IE9 не отвечает на удаленные символы.
PhoneixS

33

Используйте .keyupвместо нажатия клавиши.

Также используйте $(this).val()или просто this.valueдля доступа к текущему входному значению.

ДЕМО здесь

Информация о .keypressjQuery docs,

Событие нажатия клавиши отправляется элементу, когда браузер регистрирует ввод с клавиатуры. Это похоже на событие нажатия клавиши, за исключением случая повторения клавиш. Если пользователь нажимает и удерживает клавишу, событие нажатия клавиши запускается один раз, но отдельные события нажатия клавиши запускаются для каждого вставленного символа. Кроме того, клавиши-модификаторы (такие как Shift) запускают события нажатия клавиш, но не события нажатия клавиш.


5
keyupработает слишком медленно, и можно нажимать и удерживать клавишу, не отпуская ее, и все должно происходить. лучше использовать keydownс небольшим таймаутом, чтобы значение действительно изменилось.
vsync

Единственным недостатком, который я обнаружил, является то, что если пользователь нажмет более одного символа клавиатуры вместе, он не будет правильно зарегистрирован.
vsync

5

Вы должны прервать поток выполнения, чтобы разрешить обновление ввода.

  $(document).ready(function(event) {
       $("#dSuggest").keypress(function() {
           //Interrupt the execution thread to allow input to update
               setTimeout(function() {
                   var dInput = $('input:text[name=dSuggest]').val();
                   console.log(dInput);
                   $(".dDimension:contains('" + dInput + "')").css("display","block");
               }, 0);
       });
  });

1
keyupdelay слишком медленный для некоторых целей, а также не выполняет автоматическую фильтрацию клавиш-модификаторов. На самом деле это работает лучше для меня.
Альберт Бори

лучший ответ. keyup - медленно и не может поймать символы типа @ при нажатии двух клавиш.
Roma Rush

4

Это потому, что Keypressсобытие запускается перед добавлением нового персонажа. Вместо этого используйте событие keyup, которое отлично подойдет в вашей ситуации.

$(document).ready(function() {
    $("#dSuggest").keyup(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

Я хочу добавить к этому, если у вас много текстовых полей и вы должны сделать то же самое с их событием keyup, вы можете просто дать им общий класс css (например, commoncss) и применить событие keyup, подобное этому.

$(document).ready(function() {
    $(".commoncss").keyup(function() {
        //your code
    });
});

это значительно сократит ваш код, поскольку вам не нужно применять событие keyup по идентификатору для каждого текстового поля.


3

Я искал пример ES6 (чтобы он мог передать мой линтер). Итак, для других людей, которые ищут то же самое:

$('#dSuggest').keyup((e) => {
    console.log(e.currentTarget.value);
});

Я бы также использовал keyup, потому что вы получаете текущее значение, которое заполнено.


1

Просто используйте тайм-аут, чтобы позвонить; тайм-аут будет вызываться, когда стек событий завершится (то есть после вызова события по умолчанию)

$("body").on('keydown', 'input[type=tel]', function (e) {
    setTimeout(() => {
        formatPhone(e)
    }, 0)
});


0

jQuery получает входное значение после нажатия клавиши

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

i = 0;  
$(document).ready(function(){  
    $("input").keypress(function(){  
        $("span").text (i += 1);  
    });  
}); 
<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery keyup() Method By Tutsmake Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Enter something: <input type="text">  
<p>Keypresses val count: <span>0</span></p>  
</body>  
</html>  

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.