Не получается код ключа в функции keyup

Question

Я пытаюсь добавить функцию keyup в поле ввода, которое добавляется в DOM с помощью jquery.

$("#testDiv").html("<input id='testTextbox' name='testTextbox' type='text' onkeyup='testKeyUp(this)'>");

Я хочу сделать некоторые операции, когда пользователь вводит значение в testTextbox и нажмите клавишу ввода.

Функция keyup выглядит так:

function testKeyUp(e) {
alert(e.keyCode+" : "+e.which);
}

e.keyCode а также e.which возвращается неопределенным.

Как я могу получить код ключа в функции keyup? Может кто-нибудь помочь мне исправить это? Заранее спасибо.

Answer 1

Вот что вам нужно.

Вы назвали функцию как testKeyUp() и настоящее имя функции shippingPackageKeyValueKeyUp(e), Также вы не получите this но event

JS

$("#testDiv").html("<input id='testTextbox' name='testTextbox' type='text' onkeyup='testKeyUp(event)'>");

function testKeyUp(e) {
alert(e.keyCode+" : "+e.which);
}

Answer 2

Использование встроенных событий усложняет это. e действует как this в функции. Было бы легче немного изменить код, чтобы удалить встроенное событие, и вместо этого записать его как:

$("#testDiv").html("<input id='testTextbox' name='testTextbox' type='text'>");

var textInput = document.getElementById('testTextbox');

textInput.addEventListener('keyup', function(e){
alert(e.keyCode+" : "+e.which);
});

Или же

$("#testDiv").html("<input id='testTextbox' name='testTextbox' type='text'>");

$('#testTextbox').on('keyup', function(e){
alert(e.keyCode+" : "+e.which);
});

Вот рабочий пример:

$("#testDiv").html("<input id='testTextbox' name='testTextbox' type='text'>");

var textInput = document.getElementById('testTextbox');

textInput.addEventListener('keyup', function(e){
alert(e.keyCode+" : "+e.which);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="testDiv"></div>

Answer 3

    $("#testTextbox").on("keyup", function(e){
    if (e.key=="Enter"){
        // Your logic here
    }
    })

    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <input id='testTextbox' name='testTextbox' type='text' >

Как ответил @edkeveked выше, но я бы использовал событие.ключ вместо события.код ключа, как код ключа и который устарел в соответствии с https://developer.mozilla.org/en-US/docs/Web/Events/keyup

Answer 4

Я думаю, вы смешиваете разные вещи: pure js а также jquery, Используя только jquery, вы можете достичь того, что вы хотите с помощью фрагмента ниже.

$("#testTextbox").on("keyup", function(e){
alert(e.keyCode+" : "+e.which);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='testTextbox' name='testTextbox' type='text' >

Используя только pure Js

function testKeyUp(e){
  alert(e.keyCode+" : "+e.which);
}

<input id='testTextbox' name='testTextbox' type='text' onkeyup='testKeyUp(event)'>

Answer 5

Во-первых, я замечаю, что имя вашей функции для обработчика событий не совпадает с именем обратного вызова onkeyup.

Убедитесь, что два совпадают. А во вторых

onkeyup='testKeyUp(e)'