2014-01-08 2 views
13

Я пытаюсь это:получить значение входного текста при входе нажата клавиша

<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); 
    } 
} 

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

+0

Вы можете передать 'this' и получить' this.value' для текущего целевого/текстового поля! –

+0

* "должен получить внутренние входыHTML * не имеют innerHTML ... – epascarello

+0

да, я должен был попробовать передать это первым, спасибо за подтверждение. – user2405469

ответ

22

Попробуйте следующее:

<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);   
    } 
} 

DEMO Link

+0

Сначала я подумал, что в нем была ошибка, а затем я попытался: отлично работает и является лучшим методом vanilly, который я мог найти. Thx. –

+0

события не существует ... –

+0

Просто скорейшее изменение для кого-то, кто может это найти случайно, в HTML5 он должен быть onkeypress вместо onkeydown и event.keyCode == 13 для клавиши «Enter». –

1

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

Pass как параметр в HTML:

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

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

function search(e){ 
    alert(e.value); 
} 
+0

да, это именно то, о чем я думал ... Я должен был попробовать это перед тем, как спросить, но вы это подтвердили :) – user2405469

2

Только с помощью объекта события

function search(e) { 
    e = e || window.event; 
    if(e.keyCode == 13) { 
     var elem = e.srcElement || e.target; 
     alert(elem.value); 
    } 
} 
+0

это должно быть принято ответ – slier

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

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

+0

Разве это не версия jQuery. Но я думаю, он хочет решения в плоскости javascript. – ram

+0

или использовать jQuery, это тоже отличный ответ, спасибо, я выбрал нормальную Java сценарий, но это так же удивительно, спасибо :) – user2405469

+0

Извините, когда я сказал «или использовал jQuery», я имел в виду, что каждый дает чистое решение для javascript, и это jquery-решение, в стиле jokey ... – user2405469

0

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

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