Нажать кнопку «JavaScript» на кнопке «Ввод» в текстовом поле. - PullRequest
Новая
       173

Нажать кнопку «JavaScript» на кнопке «Ввод» в текстовом поле.

1203 голосов
/ 01 октября 2008

У меня есть один ввод текста и одна кнопка (см. Ниже). Как я могу использовать JavaScript, чтобы вызвать событие нажатия кнопки , когда внутри текстового поля нажата клавиша Enter ?

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

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Ответы [ 26 ]

5 голосов
/ 19 мая 2014 
document.onkeypress = function (e) {
 e = e || window.event;
 var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
 if (charCode == 13) {

        // Do something here
        printResult();
    }
};

Вот мои два цента. Я работаю над приложением для Windows 8 и хочу, чтобы кнопка регистрировала событие нажатия, когда я нажимаю кнопку Enter. Я делаю это в JS. Я попробовал пару предложений, но у меня были проблемы. Это работает просто отлично.

5 голосов
/ 12 июня 2015

Чтобы сделать это с помощью jQuery: 

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

Чтобы сделать это с обычным JavaScript: 

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});
4 голосов
/ 29 января 2019

В современном, не обновленном (без keyCode или onkeydown) Javascript: 

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
3 голосов
/ 28 января 2018

Для тех, кому нравится краткость и современный подход к JS. 

input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});

где input - переменная, содержащая ваш элемент input.

0 голосов
/ 10 июля 2018

В jQuery вы можете использовать event.which==13. Если у вас есть form, вы можете использовать $('#formid').submit() (с правильными слушателями событий, добавленными к отправке указанной формы). 

$('#textfield').keyup(function(event){
   if(event.which==13){
       $('#submit').click();
   }
});
$('#submit').click(function(e){
   if($('#textfield').val().trim().length){
      alert("Submitted!");
   } else {
    alert("Field can not be empty!");
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>
0 голосов
/ 13 сентября 2011

Это также может помочь, небольшая функция JavaScript, которая прекрасно работает: 

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

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

Страница:
...