Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Срабатывает нажатие на button при нажатии Enter внутри input (https://javascript.ru/forum/dom-window/35288-srabatyvaet-nazhatie-na-button-pri-nazhatii-enter-vnutri-input.html)

rebeled 06.02.2013 15:37

Срабатывает нажатие на button при нажатии Enter внутри input
 
Вложений: 1
<html><head>
        </head>
        <body>
            <form>
                <button value="OK" onclick="alert('Нажата кнопка');">ОК</button>
                <input>
            </form>
        
</body></html>

Не могу понять, почему, когда я жму на Enter после ввода текста в input срабатывает нажатие на кнопку ОК. Если кнопок много, срабатывает верхняя.

Словил alert в Firefox 18.0.2 и Chrome 24.0.1312.57 m
В IE 9.0.8112.16421 кнопка не жмётся.

danik.js 06.02.2013 16:03

Точно объяснить не могу, но это связано с тем что тип кнопки, если не указать, равен submit (тоесть имеем <button type=submit>)
А по Enter происходит как раз таки отправка формы. Ну и видимо так задумано что при этом срабатывает событие click по сабмитящей кнопке.
Кстати, если нажать Enter когда фокус находится на кнопке, также произойдет событие click, хотя мы даже мышку в руках в это время не держим. Оффтоп: пока писал, села батарейка в мышке, так что придется триггерить событие click нажатием Enter в ближайшее время ))

Deff 06.02.2013 16:33

<!DOCTYPE>
<html>
<head>
<script type="text/javascript">
function FFanaliz(a){
  //if(Тут анализ на отправку формы/типо: Все поля заполнены?/ ) return true;

  return false;
}
</script>
</head>
<body>
            <form onsubmit="return FFanaliz(this)">
                <button type="button" value="OK" onclick="alert('Нажата кнопка');">ОК</button>
                <input>
            </form>
        
</body>
</html>

rebeled 06.02.2013 17:08

Плохое решение для меня. Есть необязательные поля, состав полей в форме может менятся.
К тому же, если кнопка будет submit типа, она всё равно нажмётся

Deff 06.02.2013 17:57

Цитата:

Сообщение от rebeled
К тому же, если кнопка будет submit типа, она всё равно нажмётся

:no:
Цитата:

Сообщение от rebeled
Плохое решение для меня. Есть необязательные поля, состав полей в форме может менятся.

Но по какому-то событию Вы форму отправляете ?
Если нет - просто удалите строку
//if(Тут анализ на отправку формы/типо: Все поля заполнены?/ ) return true;

rebeled 06.02.2013 18:36

Цитата:

Сообщение от Deff (Сообщение 232027)
:no:

<!DOCTYPE>
	<html>
	<head>
	<script type="text/javascript">
	function FFanaliz(a){

	  return false;
	}
	</script>
	</head>
	<body>
	            <form onsubmit="return FFanaliz(this)">
	                <button value="OK" onclick="alert('Нажата кнопка');">ОК</button>
	                <input>
	            </form>
	         
	</body>
	</html>

При нажатии на Ентер выводится alert. По крайней мере в мозиле.

<!DOCTYPE>
	<html>
	<head>
	<script type="text/javascript">
	function FFanaliz(a){

	  return true;
	}
	</script>
	</head>
	<body>
	            <form onsubmit="return FFanaliz(this)">
	                <button value="OK" onclick="alert('Нажата кнопка');">ОК</button>
	                <input>
	            </form>
	         
	</body>
	</html>

Тоже самое

Проект написан на JSF, сабмиты в явном виде не вызываются. Всё обробатывается на уровне компонент, для правильной работы которой нужна форма. Как правило все запросы к серверу ajax. Плюс используются facelets. Т.е. в одной форме может быть совершенно разное содержимое. Даже если бы оно работло, обработать все варианты по onsubmit не представляется реальным.

danik.js 06.02.2013 20:18

Еще раз: по Enter происходит отправка формы. И это прекрасно.
Если у вас срабатывают кнопки, которые по идее не должны ничего сабмитить, так не делайте их сабмиттерами (type="button"). Если же это сабмиттеры, но вам нужно реагировать на клик по ним, думаю отличить клик мыши от программного несложно.

danik.js 06.02.2013 20:19

Помоему это и есть схема отправки формы по Enter: вызывается событие click на сабмитящей кнопке )

Deff 06.02.2013 20:38

;)
<!DOCTYPE>
<html>
<head>

</head>
<body>
            <form onsubmit="return false">
                <input type="button" value="OK" onclick="alert('Нажата кнопка')"/>
                <input>
            </form>
        
</body>
</html>

danik.js 06.02.2013 20:49

Да все проще можно сделать. Только не пойму зачем. Зачем может понадобиться обработка клика кнопки-сабмиттера, но при этом этот обработчик не подходит для программного клика. Какая разница то?


Часовой пояс GMT +3, время: 07:18.