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

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

3 голосов
/ 29 октября 2009

У меня есть эта 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>

Ответы [ 4 ]

9 голосов
/ 29 октября 2009

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

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

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

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

Событие onsubmit наступает при отправке формы. Это относится только к элементу 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>
1 голос
/ 29 октября 2009

Попробуйте добавить форму с отправкой - это должно работать (протестировано с 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>
0 голосов
/ 15 февраля 2014

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

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

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

0 голосов
/ 29 октября 2009

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

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

Проблема в том, что обработка s отличается от - если вы добавляете включающий элемент , запускается элемент onclick (вы все равно должны использовать вместо этого обработчик отправки формы, так как Йоханнес Рессел справедливо рекомендую.

[редактировать добавил примечание о HTML5]

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

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

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

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

...