Блог

Главная - Вопросы по программированию - Имитация события «ontype»

Имитация события «ontype»

#javascript #jquery

#javascript #jquery

Вопрос:

Я хочу имитировать эффект поиска Google, при котором даже при не сфокусированном окне поиска пользователь может начать печатать, а поле ввода будет фиксировать все удары клавиатуры.

Я искал ontype событие, но ничего не нашел. Я знаю, что event объект в обратных вызовах для таких событий, как click имеет информацию о клавиатуре, но я не думаю, что это то, что мне нужно.

Комментарии:

1. как насчет onkeypress или onkeyup

2. Обновил мой ответ. По-видимому, нет необходимости в перехвате символа, изменение цели сделает волшебство.

3. Снова обновил мой ответ. 🙂 Надеюсь, на этот раз это окончательно.

4. Вы также можете принять свой собственный ответ. Но я ценю, если вы примете мое 🙂

Ответ №1:

Это выполняет свою работу:

  $(document).on('keydown', function() {
     $('input').focus();
 });

Комментарии:

1. Да, это будет работать, но поскольку ваш ввод является частью document каждого ввода, который вы вводите что-либо в поле ввода, эта функция также будет выполняться и будет фокусироваться на вводе, который уже имеет фокус. Есть еще один способ, более элегантный. Я собираюсь немного улучшить свой ответ.

Ответ №2:

HTML:

 <input type="text" id="txtSearch" />

Javascript:

 var googleLikeKeyCapture = {
    inputField : null,
    documentKeydown: function(event) {
        var inputField = googleLikeKeyCapture.inputField;
        if(event.target != inputField.get(0)) {
            event.target = inputField.get(0);
            inputField.focus();
        }
    },
    init: function() {
        googleLikeKeyCapture.inputField = $('#txtSearch');
        $(document).bind('keydown', googleLikeKeyCapture.documentKeydown);
        googleLikeKeyCapture.inputField
            .focus(function() {
                $(document).unbind('keydown');
            })
            .blur(function() {
                $(document).bind('keydown', googleLikeKeyCapture.documentKeydown);
            });
        googleLikeKeyCapture.init = function() {};
    }
};

$(googleLikeKeyCapture.init);

Также вы можете найти пример jsFiddle здесь

Редактировать :

И теперь это плагин jQuery. 🙂 Если нажатие клавиши происходит в текстовой области или поле ввода, оно не захватывает ключи, все остальное попадает в указанное поле ввода. Если ваш селектор соответствует более чем одному элементу, он использует только первый элемент.

Использование: $('#txtSearch').captureKeys();

Комментарии:

1. Для чего нужна строка googleLikeKeyCapture.init = function() {}; ? Чтобы избежать утечки памяти?

2. Это привычка. Это предотвращает инициализацию объекта более одного раза.

Ответ №3:

Событие, которое вам нужно, — это onkeypress.

Ответ №4:

Попробуйте этот плагин для изменения текста jQuery:

http://www.zurb.com/playground/jquery-text-change-custom-event

Метки: