Question

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

如果选中该复选框，并且文本框中没有值，请将该复选框的名称插入关联的文本字段。
如果用户键入文本框并且未选中相应复选框的复选框，请选中它。
如果用户清除文本框，按删除/退格/等，请从复选框中清除检查。

什么不起作用： *当用户键入文本字段时，复选框不会立即显示（通常会单独键入2个键），即使逻辑说调用时，如果取消选中该复选框，请检查它。 *当用户清除文本区域时，使用退格/删除/等，复选框保持不变。

工作原理：

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

Here is the related coding being run on 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');">

Answer 1

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

在keydown-event的时间点，输入的值将是旧的/不变。

记住按键的基本生命周期：

keydown-event bubbling
在输入上应用keyevent（主要是在其中写入或从中删除）
当用户持有密钥时，也可以多次应用
keyup-event bubbling

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>

onKeyDown事件未触发

1 个答案: