Блог

Главная - Вопросы по программированию - Событие onKeyDown не запускается

Событие onKeyDown не запускается

#javascript #html #checkbox #textfield

#javascript #HTML #флажок #текстовое поле

Вопрос:

Я создал форму, которая содержит флажок и небольшое поле ввода. Я создал скрипт для выполнения двух вещей:

  • Если флажок установлен, а внутри текстового поля нет значения, вставьте название флажка в соответствующее текстовое поле.
  • Если пользователь вводит текстовое поле, а флажок для соответствующего флажка не установлен, проверьте это.
  • Если пользователь очищает текстовое поле, нажимая delete / backspace / etc, снимите флажок с флажка.

Что НЕ работает: * Когда пользователь вводит текстовое поле, флажок не появляется сразу (обычно 2 клавиши вводятся отдельно), хотя логика говорит, что при вызове, если флажок снят, установите его. * Когда пользователь очищает текстовую область, используя backspace / delete / etc., флажок остается.

Что работает:

  • Пользователь нажимает на флажок, чтобы автоматически вставить значение флажка в поле. Пользователь снова нажимает на флажок, чтобы удалить значение из текстового поля.

Вот соответствующее кодирование, выполняемое в JSFiddle

 function autocheck(ElementName, SectionName) {
//window.alert('keyword-'   SectionName   '-'   ElementName.toLowerCase());
    if (document.getElementById('keyword-'   SectionName   '-'   ElementName.toLowerCase()).checked == false)
    {
        document.getElementById('keyword-'   SectionName   '-'   ElementName.toLowerCase()).checked = true
    } 

    if (document.getElementById('keyword-'   SectionName   '-entry-'   ElementName.toLowerCase()).value == '')
    {
        document.getElementById('keyword-'   SectionName   '-'   ElementName.toLowerCase()).checked = false;
    }
}

function autofill(ElementName, SectionName) {
    ElementName=ElementName.replace(" ", "-"); 
    //window.alert('You got this: '   ElementName);

    if(document.getElementById('keyword-'   SectionName   '-'   ElementName.toLowerCase()).checked == true)
    {
        document.getElementById('keyword-'   SectionName   '-entry-'   ElementName.toLowerCase()).value = document.getElementById('keyword-'   SectionName   '-'   ElementName.toLowerCase()).value;
    } else {
        document.getElementById('keyword-'   SectionName   '-entry-'   ElementName.toLowerCase()).value = '';
    }
}

И вот соответствующий HTML

     <input type="checkbox" name="ufs_split_keywords[]" value="Throw" id="keyword-split-throw" onclick="autofill(this.value, 'split');"> <label for="keyword-split-throw">Throw</label>
    <br>
    <input type="text" name="ufs_split_keywords_entry[]" id="keyword-split-entry-throw" style="width:100px; float: right;" onkeydown="autocheck('throw', 'split');">

Ответ №1:

Используйте onkeyup вместо onkeydown!

Поскольку вы только тогда получите измененное значение поля.

В момент времени события keydown значение входных данных будет старым / неизменным.

Помните об основном жизненном цикле нажатия клавиш на входных данных:

  1. нажатие клавиши — всплывающее событие
  2. применение keyevent при вводе (в основном запись в нем или удаление из него)

    также может применяться несколько раз, когда пользователь удерживает ключ
  3. нажатие клавиши- всплывающее событие

Эта скрипка работает для меня идеально. (Ваш код, содержащий только onkeydown, изменен на onkeyup)

   <!DOCTYPE html>
    <html>
        <head>
              <script type="text/javascript">
                        function autocheck(ElementName, SectionName) {
                    //window.alert('keyword-'   SectionName   '-'   ElementName.toLowerCase());
                        if (document.getElementById('keyword-'   SectionName   '-'   ElementName.toLowerCase()).checked == false)
                        {
                            document.getElementById('keyword-'   SectionName   '-'   ElementName.toLowerCase()).checked = true
                        } 

                        if (document.getElementById('keyword-'   SectionName   '-entry-'   ElementName.toLowerCase()).value == '')
                        {
                            document.getElementById('keyword-'   SectionName   '-'   ElementName.toLowerCase()).checked = false;
                        }
                    }

                    function autofill(ElementName, SectionName) {
                        ElementName=ElementName.replace(" ", "-"); 
                        //window.alert('You got this: '   ElementName);

                        if(document.getElementById('keyword-'   SectionName   '-'   ElementName.toLowerCase()).checked == true)
                        {
                            document.getElementById('keyword-'   SectionName   '-entry-'   ElementName.toLowerCase()).value = document.getElementById('keyword-'   SectionName   '-'   ElementName.toLowerCase()).value;
                        } else {
                            document.getElementById('keyword-'   SectionName   '-entry-'   ElementName.toLowerCase()).value = '';
                        }
                    }
              </script>

        </head>
        <body>
            <input type="checkbox" name="ufs_split_keywords[]" value="Throw" id="keyword-split-throw" onclick="autofill(this.value, 'split');"> <label for="keyword-split-throw">Throw</label>
            <br>
            <input type="text" name="ufs_split_keywords_entry[]" id="keyword-split-entry-throw" style="width:100px; float: right;" onkeyup="autocheck('throw', 'split');"> 
        </body>

    </html>

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

1. Да, это сработало отлично. Я не понял разницы между OnKeyUp и OnKeyDown. Я также добавил OnBlur на всякий случай, если пользователь выбирает все с помощью мыши, а затем использует опцию «Щелкнуть правой кнопкой мыши» -> «Удалить». В любом случае это работает. Спасибо.