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

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

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
1328
kdenney 1 Окт 2008 в 01:32

27 ответов

Лучший ответ

В jQuery будет работать следующее:

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#id_of_button").click();
    }
});
$("#pw").keyup(function(event) {
    if (event.keyCode === 13) {
        $("#myButton").click();
    }
});

$("#myButton").click(function() {
  alert("Button code executed.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

Или в простом JavaScript, следующее будет работать:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});
document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>
1415
Black 4 Фев 2018 в 18:58

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

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

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

5
Alexandr Tsyganok 28 Янв 2018 в 15:41

Это решение для всех YUI там:

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

В этом особом случае у меня были лучшие результаты при использовании YUI для запуска объектов DOM, которые были введены с помощью кнопки - но это другая история ...

12
frhd 29 Авг 2013 в 14:01

Один из основных приемов, который вы можете использовать для этого, который я не видел полностью упомянутым. Если вы хотите выполнить действие ajax или какую-либо другую работу с Enter, но не хотите отправлять форму, вы можете сделать это:

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

Параметр action = "javascript: void (0);" как это ярлык для предотвращения поведения по умолчанию. В этом случае метод вызывается независимо от того, нажимаете ли вы клавишу ввода или нажимаете кнопку, и для загрузки некоторых данных выполняется вызов ajax.

23
Switters 12 Сен 2013 в 19:27

Понял это:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>
179
Anik Islam Abhi 12 Ноя 2015 в 04:53

Используйте keypress и event.key === "Enter" с современным JS!

const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        document.getElementById("btnSearch").click();
    }
});

Mozilla Docs

Поддерживаемые браузеры

14
Gibolt 28 Июн 2018 в 15:43

Попробуйте:

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>
16
mahbub_siddique 2 Мар 2015 в 08:04

В простом JavaScript,

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

Я заметил, что ответ дается только в jQuery, поэтому я подумал о том, чтобы дать что-то и на простом JavaScript.

59
Sk8erPeter 9 Май 2013 в 10:17

Тогда просто закодируйте это!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>
399
icedwater 28 Дек 2015 в 09:23
event.returnValue = false

Используйте его при обработке события или в функции, которую вызывает ваш обработчик событий.

Это работает в Internet Explorer и Opera по крайней мере.

8
Peter Mortensen 26 Май 2011 в 20:35

Для JQuery Mobile я должен был сделать

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});
8
user1071182 16 Май 2012 в 20:44
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

Это просто кое-что из недавнего проекта ... Я нашел его в сети, и я понятия не имею, есть ли лучший способ или нет в простом старом JavaScript.

14
Peter Mortensen 29 Дек 2011 в 18:32
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
Tequilaman 19 Май 2014 в 12:40

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

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
6
MCCCS 29 Янв 2019 в 14:02

Чтобы добавить полностью простое решение JavaScript, которое решило проблему @ icedwater с отправкой формы, вот полное решение с {{ X0 } } .

ПРИМЕЧАНИЕ. Это для "современных браузеров", включая IE9 +. Версия IE8 не намного сложнее, и ее можно узнать здесь.


Скрипка: https://jsfiddle.net/rufwork/gm6h25th/1/

Html

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

Javascript

// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
    var go = document.getElementById("go"),
        txt = document.getElementById("txt"),
        outige = document.getElementById("outige");

    // Note that jQuery handles "empty" selections "for free".
    // Since we're plain JavaScripting it, we need to make sure this DOM exists first.
    if (txt && go)    {
        txt.addEventListener("keypress", function (e) {
            if (event.keyCode === 13)   {
                go.click();
                e.preventDefault(); // <<< Most important missing piece from icedwater
            }
        });

        go.addEventListener("click", function () {
            if (outige) {
                outige.innerHTML += "Clicked!<br />";
            }
        });
    }
});
8
Community 23 Май 2017 в 12:02

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

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

Обратите внимание, что для этой работы вам понадобится элемент <form>, содержащий поля ввода (спасибо, Сергей Ильинский).

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

83
icedwater 28 Дек 2015 в 09:25

Чтобы сделать это с помощью 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();
    }
});
5
Stefan van den Akker 1 Окт 2015 в 06:11

В 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
hev1 9 Июл 2018 в 22:09

Я разработал пользовательский JavaScript для достижения этой функции, просто добавив класс

Пример: <button type="button" class="ctrl-p">Custom Print</button>

Здесь Вы можете проверить это Fiddle
- или -
проверить запущенный пример https://stackoverflow.com/a/58010042/6631280

Примечание: в текущей логике вам нужно нажать Ctrl + < KBD > Enter

0
Ravi Makwana 3 Дек 2019 в 12:05

В Angular2 :

(keyup.enter)="doSomething()"

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

Кроме того, идентификатор не нужен - еще один способ разделения NG2 между видом и моделью.

12
AlikElzin-kilaka 22 Авг 2015 в 11:56

Хотя я вполне уверен, что если в форме есть только одно поле и одна кнопка отправки, то нажатие клавиши ввода должно отправить форму, даже если на странице есть другая форма.

Затем вы можете захватить форму при отправке с помощью js и выполнить любые проверки или обратные вызовы, которые вы хотите.

13
garrow 1 Окт 2008 в 09:51

Поскольку никто еще не использовал addEventListener, вот моя версия. Учитывая элементы:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

Я бы использовал следующее:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

Это позволяет вам отдельно изменять тип события и действие, сохраняя HTML-код чистым.

Обратите внимание , что, вероятно, стоит убедиться, что это за пределами <form>, потому что когда я вложил эти элементы в них, нажав Enter, отправил форму и перезагрузил страницу. Мне потребовалось несколько мгновений, чтобы обнаружить.

Приложение : благодаря комментарию @ruffin я добавил отсутствующий обработчик событий и preventDefault, чтобы этот код (предположительно) также работал внутри формы. (Я приступлю к тестированию, после чего я удалю содержимое в квадратных скобках.)

76
icedwater 28 Дек 2015 в 09:28

Это также может помочь, небольшая функция 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)" />

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

-4
Niraj Chauhan 13 Сен 2011 в 10:45

Эта onchange попытка близка, но ведет себя плохо с уважением в браузере назад и вперед (в Safari 4.0.5 и Firefox 3.6.3), так что в конечном итоге я бы не стал его рекомендовать.

<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
9
beldaz 20 Янв 2012 в 00:38

В этом случае вы также хотите отключить кнопку ввода из отправки на сервер и выполнить сценарий Js.

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
10
njoshsn 2 Апр 2015 в 09:37

Никто не заметил html-атрибут «accesskey», который доступен с тех пор.

Это не javascript способ создания сочетаний клавиш.

accesskey_browsers

Сочетания клавиш атрибутов доступа на MDN

Намерен быть использованным как это. Достаточно самого атрибута html, однако мы можем изменить заполнитель или другой индикатор в зависимости от браузера и ОС. Сценарий - это непроверенный метод создания идеи. Вы можете использовать детектор библиотеки браузера, например крошечный bowser

let client = navigator.userAgent.toLowerCase(),
    isLinux = client.indexOf("linux") > -1,
    isWin = client.indexOf("windows") > -1,
    isMac = client.indexOf("apple") > -1,
    isFirefox = client.indexOf("firefox") > -1,
    isWebkit = client.indexOf("webkit") > -1,
    isOpera = client.indexOf("opera") > -1,
    input = document.getElementById('guestInput');

if(isFirefox) {
   input.setAttribute("placeholder", "ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>
13
NVRM 30 Янв 2020 в 12:27

Для запуска поиска при каждом нажатии клавиши ввода используйте это:

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}
15
Peter Mortensen 29 Дек 2011 в 18:34