Нажатие Enter внутри текстового поля не запускает событие onclick кнопки отправки в Firefox.

StackOverflow https://stackoverflow.com/questions/1642815

Вопрос

У меня есть эта html-страница, которая очень проста, она содержит текстовое поле и кнопку отправки. Я хочу, чтобы при вводе чего-либо в текстовое поле и нажатии кнопки ввода вызывалась функция в событии onclick кнопки. Он работает в IE и Google Chrome, но не работает в FireFox, это нормальное поведение FireFox или здесь что-то не хватает? 

<html>
<head>
<script language="javascript">
function callMe()
{
   alert("You entered: " + document.getElementById("txt").value);
}
</script>
</head>
<body>
<input type="text" id="txt" />
<input type="submit" value="Submit" onclick="callMe()" />
</body>
</html>
Это было полезно?

Решение

Из описания onclick событие :

  

Событие onsubmit происходит при нажатии кнопки указательного устройства над элементом. Этот атрибут может использоваться с большинством элементов.

Там нет никакой гарантии, что агент UA должен генерировать такое событие, даже когда не использует указывающее устройство и щелкает что-то.

Возможно, вам нужно событие FORM в форме:

  

Событие <=> происходит при отправке формы. Это относится только к <=> элементу .

Вам нужно будет обернуть форму вокруг текстового поля и кнопки, хотя: 

<html>
  <head>
    <script language="javascript">
      function callMe()
      {
        alert("You entered: " + document.getElementById("txt").value);
      }
    </script>
  </head>
  <body>
    <form onsubmit="callMe()" action="#">
      <input type="text" id="txt" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Другие советы

Попробуйте добавить форму с отправкой - это должно сработать (протестировано с FF 3.5): 

<html>
<head>
<script language="javascript">
function callMe()
{
   alert("You entered: " + document.getElementById("txt").value);
}
</script>
</head>
<body>
<form onsubmit="callMe()">
<input type="text" id="txt" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

[edit Первоначально я неправильно понял ситуацию и опубликовал другой ответ.]

У меня тоже не работает в Chrome (4.0.223.11).

Проблема в том, что < input > s без < form > - если вы добавляете вложенную < форму > element, срабатывает элемент onclick (вы все равно должны использовать вместо этого обработчик отправки формы, как Johannes R & # 246; ssel справедливо рекомендует.

[редактировать добавил заметку о HTML5]

Обратите внимание, что спецификация HTML5 указывает на отправку события click для кнопки отправки :

Пользовательские агенты могут устанавливать кнопку в каждой форме как кнопку формы по умолчанию. Это должна быть первая кнопка отправки в древовидном порядке, владельцем формы которой является этот элемент формы, но пользовательские агенты могут выбрать другую кнопку, если другая будет более подходящей для платформы. Если платформа поддерживает неявное предоставление пользователем формы (например, на некоторых платформах при нажатии клавиши &; Ввод &; В то время как текстовое поле фокусируется неявно, отправляет форму), то это должно вызвать Порядок активации кнопки формы по умолчанию, если он есть, для запуска.

Обратите внимание, что реализация активации на основе Enter не требуется (хотя она реализована в браузерах рабочего стола), и " метод активации " (событие click) может использоваться, когда входные данные являются частью формы (" есть владелец формы "). Определение & Quot; владельца формы & Quot; основан на наличии < form > родитель или form атрибут.

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

Насколько я знаю, вы не можете вызывать OnClick внутри TextBox. Он должен быть вне TextBox.

Если вы введете свой текст в TextBox, щелкните левой кнопкой мыши где-нибудь еще на вашей странице, а затем нажмите Enter, событие OnClick будет работать, как ни странно.

Если вы нашли решение проблемы, сообщите нам об этом.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top