时间戳

首页 > 解决方案 > 使用 javascript 以编程方式在网页上按键

javascript - 使用 javascript 以编程方式在网页上按键

问题描述

尝试使用以下代码段创建 keydown 事件。keypress 函数触发，但该值未添加到文本框中。我想使用键编辑文本框 1 的值。

fyi - 故意避免直接设置 element.value


    <html>
    
    <head>
        <script>
            function f1() {
                document.querySelector("#text1").focus()
                document.querySelector("#text1").onkeydown = test;
                var keypress = new KeyboardEvent("keydown", {
                    key: "e",
                    keyCode: 69, // example values.
                    code: "KeyE", // put everything you need in this object.
                    which: 69,
                    shiftKey: false, // you don't need to include values
                    ctrlKey: false,  // if you aren't going to use them.
                    metaKey: false   // these are here for example's sake.
                })
                console.log("srcElement" + keypress.srcElement);
                console.log("currentTarget" + keypress.currentTarget);
                var element = document.getElementById("text1")
                element.dispatchEvent(keypress);
                console.log("srcElement" + keypress.srcElement);
                console.log("currentTarget" + keypress.currentTarget);
            }
            function test(e) {
                console.log("Called" + e.key);
                console.log("Called" + e.keyCode);
            }
        </script>
    
    </head>
    
    <body onload="f1()">
        <form>
            Input 1 : <input type="text" id="text1" name="text1" />
    
            Input 2 :<input type="text" id="text2" name="text2" />
        
        </form>
    </body>
    
    </html>

这是控制台上的输出：

test.html:17 srcElementnull
test.html:18 currentTargetnull
test.html:25 Callede
test.html:26 Called69
test.html:21 srcElement[object HTMLInputElement]
test.html:22 currentTargetnull

标签： javascript

解决方案

如果我很好地理解了这个问题，我认为您可以这样做：

document.addEventListener('keypress', (evt) => {
  console.log(`code = ${evt.keyCode}`);
});

var keyboardEvent = new KeyboardEvent('keypress', {bubbles:true, 'keyCode': 48});

document.dispatchEvent(keyboardEvent);

但是您不能将keyboardEvent 用于您的目的。来自此答案中的@ zero298 ：

注意：手动触发事件不会生成与该事件关联的默认操作。例如，手动触发键事件不会导致该字母出现在焦点文本输入中。对于 UI 事件，出于安全原因，这很重要，因为它可以防止脚本模拟与浏览器本身交互的用户操作。

推荐阅读