У мене один текст і одна кнопка (див. Нижче). Як я можу використовувати 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 я додав відсутній обробник подій та а, 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>

Налаштування дії = "javascript: void (0);" наприклад, це ярлик для істотного запобігання поведінці за замовчуванням. У цьому випадку називається метод, натиснувши клавішу Enter або натисніть кнопку, і буде здійснено виклик 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

Підтримувані браузери

Хоча я впевнений, що поки у формі є лише одне поле та одна кнопка подання, натискання клавіші Enter має надіслати форму, навіть якщо на сторінці є інша форма.

Потім ви можете зафіксувати форму підписом за допомогою js та зробити будь-яку перевірку чи зворотній зв'язок.

Ніхто не помітив, що html додає "accesskey", який доступний з певного часу.

Це спосіб без JavaScript за допомогою клавіатурних скорочень.

Accesskey призначає ярлики на MDN

Навмисне використовуватись так. Сам атрибут html достатній, наскільки ми можемо змінити заповнювач місця чи інший показник залежно від браузера та ОС. Сценарій - це неперевірений підхід з нуля, щоб дати ідею. Можливо, ви хочете використовувати детектор бібліотеки браузера, як крихітний баузер

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

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

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 не набагато складніша, і її можна дізнатися тут .

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: 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()});

де вхід - це змінна, що містить ваш вхідний елемент.

У 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

Якщо сучасний JS keyUpзастарілий, використовуйте keyзамість цього

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

У цьому також може допомогти невелика функція 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)" />

Я знаю, що це питання вирішено, але я просто знайшов щось, що може бути корисним для інших.