Как стереть содержимое поля INPUT по клавише Esc? bug FireFox?
Вроде бы простая задача:
пользователь ввёл что-либо в поле ввода 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 |
В чем причина, хз, но методом проб можно придумать массу решений…
Например, использовать событие keyup вместо keydown, или выполнять очистку поля про помощи таймера с задержкой 0.
if (k == 27)
setTimeout((function(inp) {return function() {inp.value = '';}})(this), 0);
Или как-то дополнительно воздействовать на элемент, чтобы он «зашевелился»
if (k == 27) {this.blur(); this.value=""; this.focus();}
|
Цитата:
Цитата:
Цитата:
Кстати, в Opera по this.focus() курсор обратно не ставится. В принципе, манипуляция фокусом в простейшем случае решает проблему с FireFox, но... здесь я привел упрощенный фрагмент кода. В программе же у меня на onblur повешена целая ветка алгоритма с цепочкой функций. И дергать ее таким методом не хотелось бы. Я нашел ещё один способ побороть проблему с FireFox для своего частного случая. У меня по нажатию клавиши Esc содержимое инпута не только стирается, но еще и весь инпут полностью прячется! Инициализация инпута (его "всплытие"/открытие) производится по первому нажатому пользователем символу. При этом я сначала очищаю поле this.value='' (и FireFox реально его стирает!) и сразу же в поле передается нажатый символ. По ходу обнаружил в FireFox 4.0.1 бооольшую утечку памяти! Оставил компьютер включенным на субботу/воскресенье и в понедельник увидел, что он съел памяти более 1 Гигабайта!!! Вот уж не люблю выход новых релизов. Всегда не знаешь чего от них ожидать. Кстати я писал аналогичное об Опере здесь http://javascript.ru/forum/css-html-...-v-iframe.html Но это уже другая тема. А Вам спасибо за участие в теме. |
<!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>
|
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 при этом не слетает курсор с поля. Спасибо. |
| Часовой пояс GMT +3, время: 04:30. |