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

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

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

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
30.09.2008 21:32:09
Важное замечание для новичков, таких как я: ключевая часть этого вопроса - если у вас уже есть форма на странице, значит, уже есть кнопка «Отправить». Ответ jQuery совместим с разными браузерами и является хорошим решением.
Joshua Dance 18.08.2014 17:38:21
@JoshuaDance, уже имея форму / отправить, это не проблема. Страница может иметь много форм (но не вложенных), каждая из которых имеет свою собственную отправку. Каждое поле каждой формы будет вызывать только отправку этой формы. Как говорится в этом ответе .
Frédéric 14.01.2016 11:19:17
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>

1420
4.02.2018 18:58:45
Это, вероятно, лучшая практика для запроса event.which чем event.keyCode или event.charCode см developer.mozilla.org/en/DOM/event.charCode#Notes
William Niu 25.03.2011 00:58:46
keydownне keyupлучшее событие для использования. Кроме того, если вы используете asp.net, вам придется return falseв конце остановить asp.net от перехвата события.
maxp 13.01.2012 10:49:07
Проблема с использованием keydownзаключается в том, что удержание клавиши Enter будет запускать событие снова и снова. если вы присоединитесь к keyupсобытию, оно сработает только после отпускания ключа.
Steve Paulo 13.04.2012 17:29:15
Я подправил свой код , добавив event.preventDefault();перед вызовом click();функции в то время как моя страница имеет форму , и я переключился keyupс , keypressкак это было только работать обработчик для меня, в любом случае, спасибо за аккуратный кусок кода!
Adrian K. 6.02.2013 01:02:54
Честно говоря, jQuery был в значительной степени синонимом JS, когда этот ответ был опубликован. Но теперь многие из нас, кто вообще избегает jQuery (потому что это просто трата кб, когда вы используете что-то вроде React), раздражаются, когда мы ищем ответы на вопросы JS, и часто первое, что появляется, - это библиотека, которую мы надеваем. не хочу зависеть от
Andy 9.10.2015 01:00:42

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

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

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>
400
28.12.2015 09:23:28
Да, я почти сделал это. Я думаю, это просто личные предпочтения ... Мне нравится более модульный подход. ;)
kdenney 30.09.2008 22:01:53
если вам нужно остановить отправку формы: onkeydown = "if (event.keyCode == 13) {document.getElementById ('btnSubmit'). click (); event.returnValue = false; event.cancel = true;}"
GabrielC 9.04.2012 11:26:45
Это сработало для меня из-за того, что встроенный метод вместо вызова функции с похожим кодом в нем позволяет возвращать false при вызове и избегать обратной передачи. В моем случае метод «click» вызывает асинхронный вызов __doPostback без возврата «false»; просто перезагрузил бы страницу.
Dave 23.04.2012 15:35:57
Я согласен с Сэмом, этот код с этим встроенным JS-кодом ужасен до чертиков. Вы всегда должны разделять коды HTML и JavaScript.
Sk8erPeter 9.05.2013 10:06:46
@ Сам никогда не получай мудрость от марионеток . Боль ведет к страху , а страх убивает разум. Страх - это маленькая смерть, которая приводит к полному уничтожению. Я столкнусь со своим страхом. Я позволю ему пройти через меня и через меня. И когда он пройдет, я поверну внутренний глаз, чтобы увидеть его путь. Где страх прошел там ничего не будет. За исключением, может быть, встроенных обработчиков событий. Итак, да, пожалуйста, отделите ваши обработчики событий от вашего представления / разметки, как этот ответ делает . ; ^)
ruffin 23.12.2015 17:51:51

Понял это:

<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
12.11.2015 04:53:20
е = е || window.event; // кратчайший способ получить событие
Victor 20.09.2012 13:50:16
Лучший простой вариант JavaScript. Добавленный JavaScript в качестве атрибута в HTML занимает много места, а jQuery - это просто jQuery (совместимость не гарантируется). Спасибо за решение!
boxspah 15.03.2015 02:35:31
и если вы вернете false внутри if, вы можете избежать дальнейшей обработки ключа: <input type = "text" id = "txtSearch" onkeypress = "searchKeyPress (event);" /> <input type = "button" id = "btnSearch" Value = "Search" onclick = "doSomething ();" /> <script> function searchKeyPress (e) {// ищем window.event, если событие не передано в e = e || window.event; if (e.keyCode == 13) {document.getElementById ('btnSearch'). click (); вернуть ложь; } вернуть true; } </ script>
Jose Gómez 13.07.2015 21:19:15

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

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

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

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

83
28.12.2015 09:25:52
Чуваки! Прочитайте весь его вопрос. На странице уже есть другая кнопка отправки, так что это не сработает для него.
skybondsor 11.06.2014 16:56:19
Забавный факт, я недавно пытался сделать это в SharePoint. Однако в SharePoint уже есть форма, охватывающая весь ваш контент, и любые <form>теги выбрасываются иначе либеральным парсером HTML. Так что я должен захватить нажатие клавиш или перебор. (Кстати, при нажатии Enter в SharePoint по какой-то причине запускается режим редактирования. Я думаю, лента использует ту же форму.)
user1499731 2.03.2015 21:21:06
А <button type="submit" onclick="return doSomething(this)">Value</button>работает, чтобы. Подсказка кроется в returnключевом слове
Gus 24.04.2017 22:59:40

Так как никто еще не использовал 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, я добавил отсутствующий обработчик событий и a, preventDefaultчтобы этот код (предположительно) также работал внутри формы. (Я приступлю к тестированию, после чего я удалю содержимое в квадратных скобках.)

76
28.12.2015 09:28:29
Я действительно не понимаю, почему ответ JQeuery имеет больше голосов. Я плачу за сообщество разработчиков сайтов.
David 21.12.2014 22:25:42
Все, что вам действительно не хватает - это аргумент в вашем обработчике нажатия клавиш и e.preventDefault()заставить его работать с формами. Смотрите мой (новый) ответ .
ruffin 23.12.2015 18:52:28
если вы не хотите, чтобы ваши пользователи действительно вводили какие-либо данные, вы должны сделать что-то вродеif (event.keyCode == 13) { event.preventDefault(); go.click();}
unsynchronized 22.06.2016 12:47:41
Использование jQuery только для этой крошечной вещи, безусловно, бесполезно. Это также очень легко работает с CSP и занимает меньше времени для загрузки. Если можете, используйте это.
Avamander 17.04.2017 12:23:13

В простом 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
9.05.2013 10:17:17
document.layers? Вы все еще поддерживаете Netscape? !!
Victor 20.09.2012 13:52:49
Нет, вам не нужно поддерживать Netscape. blog.netscape.com/2007/12/28/…
kingdango 25.06.2013 20:02:06
netscape.com даже больше не существует (он перенаправляет на aol.com), и все же есть люди, поддерживающие nescape, удивительно.
LeartS 15.04.2014 19:04:53
evt.which ? evt.which : evt.keyCodeравноevt.which || evt.keyCode
user 17.05.2014 06:55:22
@LeartS Бьюсь об заклад, потому что есть еще люди, использующие Netscape.
SantiBailors 30.11.2015 15:16:40

Один из основных приемов, который вы можете использовать для этого, который я не видел полностью упомянутым. Если вы хотите выполнить действие 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
12.09.2013 19:27:56
Это лучшее решение для поддержки мобильных устройств. Он автоматически скрывает клавиатуру на устройствах Android, а также iOS, если вы добавляете searchCriteria.blur();в onsubmit.
Aaron Gillion 4.05.2015 22:52:13
Это не будет работать, так как на странице уже есть другая кнопка отправки.
Jose Gómez 13.07.2015 21:29:31
@ JoseGómez, на странице может быть столько кнопок отправки, сколько пожелает разработчик, и они запускаются только соответствующими полями. Требуется только иметь отдельные формы для каждой группы полей / представить. Страница не ограничена одной формой.
Frédéric 14.01.2016 11:15:36
@Frederic: из вопроса, который я (не так?) Понял, что другая кнопка отправки была в той же форме: «На моей текущей странице уже есть другая кнопка отправки, поэтому я не могу просто сделать кнопку отправки кнопкой».
Jose Gómez 14.01.2016 11:37:03
Это отличный ответ, так как он позволяет настраивать пользовательские действия, но при этом избавляет от необходимости создавать сложный переопределенный код.
Beejor 19.08.2016 08:46:39

Попытайся:

<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
2.03.2015 08:04:35

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

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}
15
29.12.2011 18:34:44
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

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

14
29.12.2011 18:32: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
28.06.2018 15:43:47

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

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

13
1.10.2008 09:51:32

Никто не заметил 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", "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
30.01.2020 12:27:12
Доступ имеет два s.
kaiser 20.09.2016 14:38:49
Кажется, не отвечает на вопрос ОП вокруг особого случая key = ENTER
ozangds 23.10.2017 21:47:08

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

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

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

12
29.08.2013 14:01:38

В Angular2 :

(keyup.enter)="doSomething()"

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

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

12
22.08.2015 11:56:32
Вот вопрос о дополнительной информации о параметрах
AlikElzin-kilaka 22.08.2015 12:04:46

В этом случае вы также хотите набрать кнопку ввода с отправки на сервер и выполнить сценарий 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
2.04.2015 09:37:26

Эта попытка подмены близка, но ведет себя неправильно по отношению к браузеру, то вперед (в 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
20.01.2012 00:38:03
Следует также упомянуть, что он срабатывает на расфокусировке.
FluorescentGreen5 15.05.2017 11:04:43
event.returnValue = false

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

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

8
26.05.2011 20:35:15

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

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});
8
16.05.2012 20:44:52
.liveустарела в jQuery 1.7. Это все еще считается ОК в jQuery Mobile?
Barmar 30.10.2012 19:58:43

Чтобы добавить полностью простое решение 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 />";
            }
        });
    }
});
8
23.05.2017 12:02:46
Прогнозы без объяснений затрудняют решение ваших проблем. Дайте мне знать, что кажется неправильным, и я был бы рад продолжить.
ruffin 14.05.2018 03:57:59

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

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
6
29.01.2019 14:02:56
Это, на мой взгляд, самый простой ответ, который делает работу. В моем случае я обновил его до onkeypress = "inputKeyPressed (event)", а затем обработал параметр event.which в самой функции. Например, клавиша ввода возвращает событие, которое обозначено как 13.
ak93 1.02.2019 11:47:38
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
19.05.2014 12:40:51
Сортировка излишков для размещения обработчика событий в документе. Если у вас было charCodeгде-то еще 13, вы стреляете printResult().
ruffin 23.12.2015 18:44:22

Чтобы сделать это с помощью 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
1.10.2015 06:11:49

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

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

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

5
28.01.2018 15:41:02

В 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
9.07.2018 22:09:43

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

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

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

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

0
3.12.2019 12:05:45

Это также может помочь, небольшая функция 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
13.09.2011 10:45:41
Вопрос заключался в том, чтобы вызвать нажатие кнопки с помощью клавиши ввода в текстовом поле. Ваше решение для функциональности типа «водяной знак».
kdenney 14.09.2011 13:23:04