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

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

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

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

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

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

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

Понял это:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сочетания клавиш атрибутов доступа на 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>

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

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

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

В Angular2 :

(keyup.enter)="doSomething()"

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

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

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

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

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

event.returnValue = false

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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