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


1293

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

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

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

1
Важное замечание для новичков, таких как я: ключевая часть этого вопроса - если у вас уже есть форма на странице, значит, уже есть кнопка «Отправить». Ответ jQuery совместим с различными браузерами и является хорошим решением.
Джошуа Дэнс

2
@JoshuaDance, уже имея форму / отправить, это не проблема. Страница может иметь много форм (но не вложенных), каждая из которых имеет свою собственную отправку. Каждое поле каждой формы будет вызывать только отправку этой формы. Как говорится в этом ответе .
Фредерик

Ответы:


1426

В 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>


12
Это, вероятно, лучшая практика для запроса event.which чем event.keyCode или event.charCode см developer.mozilla.org/en/DOM/event.charCode#Notes
Уильям Ню

25
keydownне keyupлучшее событие для использования. Кроме того, если вы используете asp.net, вам придется return falseв конце остановить asp.net от перехвата события.
максимум

144
Проблема с использованием keydownзаключается в том, что удержание клавиши Enter будет запускать событие снова и снова. если вы присоединитесь к keyupсобытию, оно сработает только после отпускания ключа.
Стив Пауло

26
Я подправил свой код , добавив event.preventDefault();перед вызовом click();функции в то время как моя страница имеет форму , и я переключился keyupс , keypressкак это было только работать обработчик для меня, в любом случае, спасибо за аккуратный кусок кода!
Адриан К.

7
Честно говоря, jQuery был в значительной степени синонимом JS, когда этот ответ был опубликован. Но теперь многие из нас, кто вообще избегает jQuery (потому что это просто трата кб, когда вы используете что-то вроде React), испытывают раздражение, когда мы ищем ответы на вопросы JS, и часто первое, что появляется, - это библиотека, которую мы надеваем. не хочу зависеть от
Энди

402

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

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

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

5
Да, я почти сделал это. Я думаю, это просто личные предпочтения ... Мне нравится более модульный подход. ;)
Kdenney

9
если вам нужно остановить отправку формы: onkeydown = "if (event.keyCode == 13) {document.getElementById ('btnSubmit'). click (); event.returnValue = false; event.cancel = true;}"
Габриэль Чунг

3
Это сработало для меня из-за того, что встроенный метод вместо вызова функции с похожим кодом в нем позволяет возвращать false при вызове и избегать обратной передачи. В моем случае метод «click» вызывает асинхронный вызов __doPostback без возврата «false»; просто перезагрузил бы страницу.
Дейв

3
Я согласен с Сэмом, этот код с этим встроенным JS-кодом ужасен. Вы всегда должны разделять коды HTML и JavaScript.
Sk8erPeter

9
@ Сам никогда не получай мудрость от марионеток . Боль ведет к страху , а страх убивает разум. Страх - это маленькая смерть, которая приводит к полному уничтожению. Я столкнусь со своим страхом. Я позволю ему пройти через меня и через меня. И когда оно пройдет, я поверну внутренний глаз, чтобы увидеть его путь. Где страх прошел там ничего не будет. За исключением, может быть, встроенных обработчиков событий. Итак, да, пожалуйста, отделите ваши обработчики событий от вашего представления / разметки, как этот ответ делает . ; ^)
ruffin

179

Понял это:

<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>

22
е = е || window.event; // кратчайший способ получить событие
Виктор

2
Лучший простой вариант JavaScript. Добавленный JavaScript в качестве атрибута в HTML занимает много места, а jQuery - это просто jQuery (совместимость не гарантируется). Спасибо за решение!
boxspah

и если вы вернете 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 (); вернуть ложь; } верните истину; } </ script>
Хосе Гомес

83

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

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

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

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


30
Чуваки! Прочитайте весь его вопрос. На странице уже есть другая кнопка отправки, так что это не сработает для него.
skybondsor

5
Забавный факт, я недавно пытался сделать это в SharePoint. Однако в SharePoint уже есть форма, охватывающая весь ваш контент, и любые другие <form>теги выбрасываются иначе либеральным парсером HTML. Таким образом, я должен захватить нажатие клавиш или перебор. (Кстати, нажатие Enter в SharePoint по какой-то причине запускает режим редактирования. Я думаю, лента использует ту же форму.)

1
А <button type="submit" onclick="return doSomething(this)">Value</button>работает, чтобы. Подсказка кроется в returnключевом слове
Гас

77

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


14
Я действительно не понимаю, почему ответ JQeuery имеет больше голосов. Я плачу за сообщество разработчиков сайтов.
Дэвид

1
Все, что вам действительно не хватает - это аргумент в вашем обработчике нажатия клавиш и e.preventDefault()заставить его работать с формами. Смотрите мой (новый) ответ .
ruffin

5
если вы не хотите, чтобы ваши пользователи действительно вводили какие-либо данные, вы должны сделать что-то вродеif (event.keyCode == 13) { event.preventDefault(); go.click();}
несинхронизировано

1
Использование jQuery только для этой крошечной вещи, безусловно, бесполезно. Это также очень легко работает с CSP и занимает меньше времени для загрузки. Если можете, используйте это.
Avamander

59

В простом 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.


20
document.layers? Вы все еще поддерживаете Netscape? !!
Виктор

6
Нет, вам не нужно поддерживать Netscape. blog.netscape.com/2007/12/28/…
kingdango

7
netscape.com даже больше не существует (он перенаправляет на aol.com), и все же есть люди, поддерживающие nescape, удивительно.
Начало

6
evt.which ? evt.which : evt.keyCodeравенevt.which || evt.keyCode
пользователь

3
@LeartS Бьюсь об заклад, потому что есть еще люди, использующие Netscape.
SantiBailors

23

Один из основных приемов, который вы можете использовать для этого, который я не видел полностью упомянутым. Если вы хотите выполнить действие 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.


Это лучшее решение для поддержки мобильных устройств. Он автоматически скрывает клавиатуру на устройствах Android, а также iOS, если вы добавляете searchCriteria.blur();в onsubmit.
Аарон Гиллион,

Это не будет работать, так как на странице уже есть другая кнопка отправки.
Хосе Гомес

@ JoseGómez, на странице может быть столько кнопок отправки, сколько пожелает разработчик, и они запускаются только соответствующими полями. Требуется только иметь отдельные формы для каждой группы полей / представить. Страница не ограничена одной формой.
Фредерик

@Frederic: из вопроса, который я (не так?) Понял, что другая кнопка отправки была в той же форме: «На моей текущей странице уже есть другая кнопка отправки, поэтому я не могу просто сделать кнопку отправки кнопкой».
Хосе Гомес

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

16

Попробуй это:

<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>

15

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

$(document).keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        $('#btnSearch').click();
    }
}

14
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

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



13

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

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


13

Никто не заметил 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>


1
Доступ имеет два s.
Кайзер

3
Кажется, не отвечает на вопрос ОП вокруг особого случая key = ENTER
Озан Беллик

12

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

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

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


12

В Angular2 :

(keyup.enter)="doSomething()"

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

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


1
Вот вопрос о дополнительной информации о параметрах
keyup

10

В этом случае вы также хотите набрать кнопку ввода с отправки на сервер и выполнить сценарий 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();" />

9

Эта попытка замены близка, но ведет себя не так, как раньше, в браузере (в Safari 4.0.5 и Firefox 3.6.3), поэтому, в конце концов, я бы не рекомендовал это.

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

Следует также упомянуть, что он срабатывает на расфокусировке.
FluorescentGreen5

8
event.returnValue = false

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

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


8

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

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});

2
.liveустарела в jQuery 1.7. Это все еще считается ОК в jQuery Mobile?
Бармар

8

Чтобы добавить полностью простое решение 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 />";
            }
        });
    }
});

1
Прогнозы без объяснений затрудняют решение ваших проблем. Дайте мне знать, что кажется неправильным, и я был бы рад продолжить.
Ерф

7

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

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">

Это, на мой взгляд, самый простой ответ, который делает работу. В моем случае я обновил его до onkeypress = "inputKeyPressed (event)", а затем обработал параметр event.which в самой функции. Например, клавиша ввода возвращает событие, которое обозначено как 13.
ak93

5
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. Я попробовал пару предложений, но у меня были проблемы. Это работает просто отлично.


Сортировка излишков для размещения обработчика событий в документе. Если у вас было charCodeгде-то еще 13, вы стреляете printResult().
ruffin

5

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

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

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

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


1

Для современного JS keyCodeне рекомендуется использовать keyвместо

searchInput.onkeyup = function (e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
}

0

В 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

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

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

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

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


-4

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

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


5
Вопрос заключался в том, чтобы вызвать нажатие кнопки с помощью клавиши ввода в текстовом поле. Ваше решение для функциональности типа «водяной знак».
Кденни
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.