Форум

Маэстро · #1 (**permalink**) 18.06.2011, 14:36

Вроде бы простая задача:
пользователь ввёл что-либо в поле ввода input, потом передумал и отменяет ввод нажатием клавиши Esc (стирает введенный в поле текст).
Оказалось, что FireFox с этим не согласен.
Вот простой проверочный код:

<html>
<body>
<script type="text/javascript">

var o=document.createElement('INPUT');

o.onkeydown = function(event) 
{
event = event || window.event;
var k = event.keyCode;
if (k == 27) this.value = '';
};

document.body.appendChild(o);
</script>
</body>
</html>

Кто-нибудь может объяснить происходящее?
Это баг FireFox или фича? Или я что-то не так делаю?
Firefox 4.0.1

Amphiluke · #2 (**permalink**) 18.06.2011, 17:31

В чем причина, хз, но методом проб можно придумать массу решений…
Например, использовать событие keyup вместо keydown, или выполнять очистку поля про помощи таймера с задержкой 0.

if (k == 27)
    setTimeout((function(inp) {return function() {inp.value = '';}})(this), 0);

Или как-то дополнительно воздействовать на элемент, чтобы он «зашевелился»

if (k == 27) {this.blur(); this.value=""; this.focus();}

Маэстро · #3 (**permalink**) 20.06.2011, 12:08

Сообщение от Amphiluke

В чем причина, хз, но методом проб можно придумать массу решений…
Например, использовать событие keyup вместо keydown

-По onkeyup не работает в Opera (аналогично как в FireFox по onkeydown).

Сообщение от Amphiluke

или выполнять очистку поля про помощи таймера с задержкой 0.

if (k == 27)  setTimeout((function(inp) {return function() {inp.value = '';}})(this), 0);

-В FireFox это не работает.

Сообщение от Amphiluke

Или как-то дополнительно воздействовать на элемент, чтобы он «зашевелился»

if (k == 27) {this.blur(); this.value=""; this.focus();}

-Да, это в FireFox работает!
Кстати, в Opera по this.focus() курсор обратно не ставится.
В принципе, манипуляция фокусом в простейшем случае решает проблему с FireFox, но... здесь я привел упрощенный фрагмент кода. В программе же у меня на onblur повешена целая ветка алгоритма с цепочкой функций. И дергать ее таким методом не хотелось бы.

Я нашел ещё один способ побороть проблему с FireFox для своего частного случая. У меня по нажатию клавиши Esc содержимое инпута не только стирается, но еще и весь инпут полностью прячется! Инициализация инпута (его "всплытие"/открытие) производится по первому нажатому пользователем символу. При этом я сначала очищаю поле this.value='' (и FireFox реально его стирает!) и сразу же в поле передается нажатый символ.

По ходу обнаружил в FireFox 4.0.1 бооольшую утечку памяти! Оставил компьютер включенным на субботу/воскресенье и в понедельник увидел, что он съел памяти более 1 Гигабайта!!! Вот уж не люблю выход новых релизов. Всегда не знаешь чего от них ожидать. Кстати я писал аналогичное об Опере здесь Сумасшедшая утечка памяти в Opera при использовании javascript в IFRAME
Но это уже другая тема.

А Вам спасибо за участие в теме.

nikita.mmf · #4 (**permalink**) 20.06.2011, 14:00

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<script type="text/javascript">
		var inputElem = document.createElement('input');
		inputElem[window.opera ? "onkeypress" : "onkeyup"] = function(event) {
			event = event || window.event;
			var k = event.keyCode;
			if ( k == 27 ) { 
				event.preventDefault();
				this.value = ''
			};
		};
		document.body.appendChild( inputElem );
</script>
</body>
</html>

Маэстро · #5 (**permalink**) 20.06.2011, 15:55

nikita.mmf,
сначала отрицательное:
1. Ваш код в IE вызывает ошибку. Лично я использую кроссбраузерный эквивалент погашения события cancelEvent() вместо preventDefault):

function cancelEvent(e) 
// кроссбраузерная функция подавления события
{ 
e = e ? e : window.event; 
if (e.stopPropagation) e.stopPropagation(); 
else if (e.preventDefault) e.preventDefault();  
e.cancelBubble=true;e.cancel=true;e.returnValue=false;return false; 
};

2. Стараюсь максимально не использовать onkeyup. Почему? Хотите смейтесь, хотите нет, но сейчас расскажу. Когда твой продукт рассчитан на несколько тысяч пользователей, то всегда найдется с десяток раздраженных людей, которым не нравится то то, то сё. И их мнение приходится учитывать. Есть пользователи, которые жмут кнопку и... держат её в нажатом состоянии... и ждут пока что-то произойдет! а т.к. сработка происходит по keyup, то они не понимают, что происходит, потому что ничего не происходит. Вот так вот.

из положительного:
1. Ваш код по onkeyup в FireFox работает.

2. Я увидел в Вашем коде интересную (вроде бы несущественную) деталь: использование preventDefault() до inp.value=''; а не после inp.value=''; как это делал я. Что это меняет? Оказывается, приятная неожиданность: в Opera при этом не слетает курсор с поля. Спасибо.

Форум

Справочник

Discord чат

Курсы javascript