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

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

Deff 06.02.2013 21:24

danik.js,
В хроме ксать глюк с <button - не отрабатывает события focus и т.д - кроме клика

danik.js 06.02.2013 21:55

Deff, с сылками тоже самое. Не уверен что это глюк.

rebeled 07.02.2013 11:07

Цитата:

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

У меня на форме много кнопок, в том числе и те которые должны сабмитить, но не всю форму, а посылать ajax. они тоже должны быть типа submit. В этом и проблема, по Enter срабатывает не та кнопка, которую ожидает пользователь, а верхняя. Скажем вводит пользователь информацию, жмёт Ентер, а вместо кнопки ОК срабатывает кнопка из верхнего меню Назад. Юзер в ярости, програмист в...
Выход понятен, разносить кнопки по разным формам или заменять кнопки на ссылки, но мне было бы удобнее, если бы этот эффект можно было б просто отключить.

Deff 07.02.2013 12:29

Цитата:

Сообщение от rebeled
они тоже должны быть типа submit.

:) Нафига ? - добавьте им класс submit и анализируйте клик по кнопкам с данным классом

rebeled 07.02.2013 12:51

Цитата:

Сообщение от Deff (Сообщение 232214)
:) Нафига ? - добавьте им класс submit и анализируйте клик по кнопкам с данным классом

В JSF ичпользуются готовые компоненты, которые на выходе генерируются в определённый html. В данном случае эти компоненты primefaces. Переопределение этих компонент приведёт к некорректной работе системы в целом.

Deff 07.02.2013 13:05

rebeled,
У Вас неправильный подход к проблеме, - если Вы программист - это Вы брали кривые плагины - Вы и выкручивайтесь,
если руководитель - какое Вам дело до этих тонкостей ? Это безденежье ?

Бестолковый топик, -ушёл!

rebeled 07.02.2013 13:37

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

danik.js 07.02.2013 14:08

rebeled, пройдись циклом по всем кнопкам и выставь им button.type = "button". Разве так не получится?

rebeled 07.02.2013 14:18

Цитата:

Сообщение от danik.js (Сообщение 232248)
rebeled, пройдись циклом по всем кнопкам и выставь им button.type = "button". Разве так не получится?

Нет, кнопки всё равно не будут работать так как надо, да и сделать это сложно: часть контролов прорисовывется уже после загрузки страницы в результате действий пользователя ajax запросами, после обработки события на сервере с обращением в БД. Выносить всё это на клиент нельзя.

danik.js 07.02.2013 16:07

Ну тогда проверяй свойства x/y у объекта события, передаваемого в onclick. Если они нулевые - клик сделан не мышью. Еслиб не ИЕ7-8, был бы более простой и надежный способ - event.detail. При клике мышью он больше нуля (кол-во быстрых кликов), иначе - 0


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