onKeyDown 事件未触发答案

【问题标题】：onKeyDown event not firingonKeyDown 事件未触发
【发布时间】：2014-07-04 13:32:21
【问题描述】：

我制作了一个包含一个复选框和一个小输入字段的表单。我制作了一个脚本来做两件事：

如果复选框被选中，并且文本框中没有值，则将复选框的名称插入关联的文本字段中。
如果用户在文本框中输入内容并且相应复选框的复选框未选中，请选中它。
如果用户清除文本框，按删除/退格/等，清除复选框中的复选。

什么不工作： * 当用户在文本字段中键入时，复选框不会立即出现（通常是 2 个键分别键入），即使逻辑说调用时，如果未选中复选框，请选中它。 * 当用户使用退格/删除/等清除文本区域时，复选框仍然存在。

什么是有效的：

用户单击复选框以将复选框值自动插入到字段中。用户再次单击复选框以清除文本字段中的值。

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');">

【问题讨论】：

标签： javascript html checkbox textfield

【解决方案1】：

使用 onkeyup 代替 onkeydown！
因为你只会得到字段的更改值。

在 keydown-event 的时间点，输入的值将是旧的/未更改的。

牢记按键输入的基本生命周期：

keydown 事件冒泡
在输入上应用 keyevent（主要是在其中写入或从中删除）
也可以在用户按住键时多次应用
按键事件冒泡

This fiddle 非常适合我。（您只有 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>

【讨论】：

是的，这非常有效。我不明白 OnKeyUp 和 OnKeyDown 之间的区别。我还添加了 OnBlur，以防用户使用鼠标选择所有内容，然后使用右键单击 -> 删除选项。无论哪种方式，这都有效。谢谢。