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

1154

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

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

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
  • 1
    Важное замечание для новичков, таких как я: ключевая часть этого вопроса - если у вас уже есть форма на странице, у вас уже есть кнопка «Отправить». Ответ jQuery совместим с различными браузерами и является хорошим решением.
  • 2
    @JoshuaDance, уже имея форму / отправить, это не проблема. Страница может иметь много форм (но не вложенных), каждая из которых имеет свою собственную отправку. Каждое поле каждой формы будет вызывать только отправку этой формы. Как говорится в этом ответе .
Теги:
button
onclick
onkeypress

26 ответов

1329
Лучший ответ

В 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
  • 0
    @William: Как он с помощью keyup , и ваша ссылка говорит « charCode никогда не устанавливается в keydown и keyup . События В этих случаях keyCode устанавливается вместо этого.» это не имеет значения. Тем не менее, я не думаю, что keyup является подходящим событием для работы ( keydown , я бы подумал; например, так ведет себя кнопка, когда она имеет фокус).
Показать ещё 13 комментариев
353

Затем просто введите код!

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

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>
  • 5
    Да, я почти сделал это. Я думаю, это просто личные предпочтения ... Мне нравится более модульный подход. ;)
  • 9
    если вам нужно остановить отправку формы: onkeydown = "if (event.keyCode == 13) {document.getElementById ('btnSubmit'). click (); event.returnValue = false; event.cancel = true;}"
Показать ещё 7 комментариев
175

Выяснил это:

<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>
  • 21
    е = е || window.event; // кратчайший способ получить событие
  • 2
    Лучший простой вариант JavaScript. Добавленный JavaScript в качестве атрибута в HTML занимает много места, а jQuery - это просто jQuery (совместимость не гарантируется). Спасибо за решение!
Показать ещё 1 комментарий
76

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

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

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

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

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

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

  • 14
    Я действительно не понимаю, почему ответ JQeuery имеет больше голосов. Я плачу за сообщество разработчиков сайтов.
  • 1
    Все, что вам действительно не хватает, - это аргумент в вашем обработчике нажатия клавиш и e.preventDefault() чтобы заставить его работать с формами. Смотрите мой (новый) ответ .
Показать ещё 2 комментария
53

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

  • 19
    document.layers? Вы все еще поддерживаете Netscape? !!
  • 14
    да, должны поддерживать Netscape ...
Показать ещё 4 комментария
18

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

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

  • 0
    Это лучшее решение для поддержки мобильных устройств. Он автоматически скрывает клавиатуру на устройствах Android, а также iOS, если вы добавляете searchCriteria.blur(); на onsubmit .
  • 0
    Это не будет работать, так как на странице уже есть другая кнопка отправки.
Показать ещё 4 комментария
12

Попробуйте:

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

Чтобы запускать поиск каждый раз при нажатии клавиши ввода, используйте это:

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

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

9

Никто не заметил html attibute "accesskey", который доступен с тех пор.

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

Изображение 2170

Сочетания клавиш атрибутов доступа на 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>
  • 1
    Доступ имеет два s .
  • 2
    Кажется, не отвечает на вопрос ОП вокруг особого случая ключ = ENTER
9

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

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

8

В Angular2:

(keyup.enter)="doSomething()"

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

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

  • 1
    Вот вопрос о дополнительной информации о параметрах keyup: stackoverflow.com/q/32155887/435605
  • 0
    Кто бы ни отрицал, пожалуйста, объясните, почему ...
8

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

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

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

7

Эта попытка 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();" />
  • 0
    Следует также упомянуть, что он срабатывает на расфокусировке.
6

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

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

6

В этом случае вы также можете ввести disable кнопку ввода из Posting на сервер и выполнить Js script.

<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();" />
6

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

$('#id_of_textbox').live("keyup", function(event) {
    if(event.keyCode == '13'){
    $('#id_of_button').click();
    }
});
  • 2
    .live устарела в jQuery 1.7. Это все еще считается ОК в jQuery Mobile?
6
event.returnValue = false

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

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

5

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

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


Fiddle: 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: /questions/10685/what-is-the-non-jquery-equivalent-of-documentready/71469#71469
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
    Прогнозы без объяснений затрудняют решение ваших проблем. Дайте мне знать, что кажется неправильным, и я был бы рад продолжить.
4
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. Я попробовал пару предложений, но имел проблемы. Это работает отлично.

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

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

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

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

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

0

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

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
  • 0
    Это, на мой взгляд, самый простой ответ, который делает работу. В моем случае я обновил его до onkeypress = "inputKeyPressed (event)", а затем обработал параметр event.which в самой функции. Например, клавиша ввода возвращает событие, которое равно 13.
  • 0
    Это, кажется, не защищает от удержания входа ...
0

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню