Получить значение вводимого текста при нажатии клавиши ввода

Я пытаюсь это:

<input type="text" placeholder="some text" class="search" onkeydown="search()"/>
<input type="text" placeholder="some text" class="search" onkeydown="search()"/>

с некоторым javascript, чтобы проверить, нажата ли клавиша ввода:

function search() {
    if(event.keyCode == 13) {
        alert("should get the innerHTML or text value here");
    }
}

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


javascript input html keycode
person user2405469    schedule 08.01.2014    source источник
comment
Вы можете передать this и получить this.value для текущей цели/текстового поля!   -  person Dhaval Marthak    schedule 08.01.2014
comment
должен получить входные данные innerHTML не имеют innerHTML...   -  person epascarello    schedule 08.01.2014
comment
да, я должен был сначала попытаться пройти это, спасибо за подтверждение.   -  person user2405469    schedule 08.01.2014

Ответы (6)


arrow_upward
77
arrow_downward

Попробуй это:

<input type="text" placeholder="some text" class="search" onkeydown="search(this)"/>  
<input type="text" placeholder="some text" class="search" onkeydown="search(this)"/>

JS-код

function search(ele) {
    if(event.key === 'Enter') {
        alert(ele.value);        
    }
}

Ссылка на демоверсию

person brg    schedule 08.01.2014
comment
Сначала я подумал, что это ошибка, а потом попробовал: работает отлично и это лучший ванильный подход, который я смог найти. Спасибо. - person Xan-Kun Clark-Davis; 07.07.2016
comment
Просто быстрое изменение для тех, кто может случайно найти это, в HTML5 это должно быть onkeypress вместо onkeydown и event.keyCode == 13 для клавиши «Ввод». - person Hokhy Tann; 07.03.2018
comment
Кроме того, в HTML5 «поиск (это)» должен быть «поиск (событие)», из которого вы читаете «ele.keyCode === 13», чтобы узнать, был ли нажат Enter. ключевое слово "это" не работает. - person DocWeird; 11.10.2019

arrow_upward
15
arrow_downward 

$("input").on("keydown",function search(e) {
    if(e.keyCode == 13) {
        alert($(this).val());
    }
});

Пример jsFiddle: http://jsfiddle.net/NH8K2/1/

person Alexander    schedule 08.01.2014
comment
Разве это не версия jQuery. Но я думаю, ему нужно решение в плоском javascript. - person brg; 08.01.2014
comment
или используйте jQuery, это тоже отличный ответ, спасибо, я выбрал обычный Javascript, но это так же здорово, спасибо :) - person user2405469; 08.01.2014
comment
извините, когда я сказал или использовал jQuery, я имел в виду, что все дают чистое решение javascript, а это решение jquery, в шутливом тоне... - person user2405469; 08.01.2014

arrow_upward
7
arrow_downward

Просто используя объект события

function search(e) {
    e = e || window.event;
    if(e.keyCode == 13) {
        var elem = e.srcElement || e.target;
        alert(elem.value);
    }
}
person epascarello    schedule 08.01.2014

arrow_upward
3
arrow_downward

Прослушайте событие change.

document.querySelector("input")
  .addEventListener('change', (e) => {
    console.log(e.currentTarget.value);
 });
person Daniel De León    schedule 03.02.2020

arrow_upward
2
arrow_downward

Вы не должны размещать код Javascript в своем HTML, поскольку вы даете этим вводам класс («поиск»), нет причин делать это. Лучшим решением было бы сделать что-то вроде этого:

$( '.search' ).on( 'keydown', function ( evt ) {
    if( evt.keyCode == 13 )
        search( $( this ).val() ); 
} );
person Gabin    schedule 08.01.2014

arrow_upward
0
arrow_downward

Что-то вроде этого (не проверено, но должно работать)

Передайте это как параметр в Html:

<input type="text" placeholder="some text" class="search" onkeydown="search(this)"/>

И предупредите значение параметра, переданного в функцию поиска:

function search(e){
  alert(e.value);
}
person Tim Sommer    schedule 08.01.2014