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

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

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

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

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

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

Ответы [ 26 ]

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

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

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

11 голосов
/ 29 августа 2013

Это решение для всех любителей YUI : 

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

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

11 голосов
/ 07 июля 2016

Никто не заметил html attibute "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", "Access keys: ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "Access keys: ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>
11 голосов
/ 22 августа 2015

In Angular2 : 

(keyup.enter)="doSomething()"

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

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

10 голосов
/ 18 февраля 2018

Используйте 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

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

9 голосов
/ 08 мая 2010

Эта попытка 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 голосов
/ 02 апреля 2015

В этом случае вы также должны набрать кнопку ввода с Отправка на сервер и выполнить скрипт 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();" />
8 голосов
/ 17 мая 2012

Для jquery mobile мне пришлось сделать 

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});
8 голосов
/ 22 апреля 2010 
event.returnValue = false

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

Работает как минимум в Internet Explorer и Opera.

7 голосов
/ 23 декабря 2015

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

ПРИМЕЧАНИЕ: Это для "современных браузеров", включая 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 />";
            }
        });
    }
});
Страница:
...