Javascript HMTL, событие onclick отправляется при нажатии кнопки, но не при нажатии клавиши на клавиатуре?

Question

Я очень старался найти решение моей проблемы, но результат поиска отображает так много дополнительного кода (PHP, divs и т. Д.).

Я использую только HTML и JavaScript.

У меня есть одна форма

<form id="form1"> 
<input name="name" type="text" size="20"> 
</form> 

И одна кнопка

<button onclick="outputname()" type="submit">Search</button> 

Так идея пользователь вводит номер на форму и нажимает на кнопку поиска и выполняется действие (это работает Великий).

Однако, если пользователь вводит номер и нажимает кнопку Enter на клавиатуре, страница обновляется. То же самое происходит и с iPad. (Вместо «Go» отображается «Return»).

Поэтому я хочу, чтобы кнопка ввода работала на клавиатуре и переходила на работу в iOS.

Идея состоит в том, что пользователь вводит номер клиента и отображаются соответствующие данные.

Answer 1

Дайте идентификатор как ваше поле ввода и кнопку, чтобы убедиться, что вы ловушка правильные один:

HTML:

<form action="destination.html" method="post"> 
    <input id="foo" name="name" type="text" size="20"> 
    <button id="mybutt" onclick="outputname()" type="submit">Search</button> 
</form> 

Обратите внимание, что destination.html где вы хотите, чтобы данные, размещенный в , Если вы хотите, чтобы он был отправлен в тот же файл, просто используйте: action="" или оставьте это.

Javascript:

document.getElementById('foo').onkeypress = function(e){ 
    if (!e) e = window.event; 
    var keyCode = e.keyCode || e.which; 
    if (keyCode == '13'){ 
     var btn = document.getElementById('mybutt'); 
     mybutt.click(); 
     return false; 
    } 
} 

Источники:

How to detect when the user presses Enter in an input field

Capturing the Enter key to cause a button click with javascript

Answer 2

Вставьте это: action="post" Внутри вашего тега формы. Т.е., если форма тег должен быть таким образом <form id="form1" action="post">

Answer 3

В этом случае, вы могли бы управлять submit событие, вместо key/click событий.

<form id="form1" onsubmit="outputname()"> 

Представление события, спровоцированные либо щелчком или нажатием ввести позвонит outputname.