Question

我目前正在处理Chrome最新版本。我有以下简单的HTML代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<html>
<input id="inputfield" type = "textfield">
</html>
</body>
</html>

然后使用javascript我首先尝试设置该字段的文本即可，然后将其对焦，然后按空格键。

textbox = document.getElementById("inputfield")
textbox.value = "word";

  var evt = document.createEvent("KeyboardEvent");
evt.initKeyboardEvent(
                   "keyup",
                    true, 
                    true, 
                    window, 
                    false, 
                    false, 
                    false, 
                    false,
                    32, 
                    0 
);

textbox.focus();
textbox.dispatchEvent(evt);

但没有焦点发生，最后一行只返回true; 我正在通过chrome的控制台执行代码我不知道这是否会产生影响。

谢谢

Answer 1

您的标记不正确，html标记未显示在正文中。

应该是这样的：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <input id="inputfield" type = "textfield">
    </body>
</html>

然后正如@FAngel所说，你不能以这种方式改变输入字段的值，你必须将它的文本设置为你想要的任何值。

Answer 2

你只是发起一个事件。但它不会改变一个值，“字”不会成为“字”。不知道为什么它不能在控制台上运行，但可能是你在那里缺少重要的东西。可能是因为var（我几次注意到这个问题）。尝试将var evt = document.createEvent("KeyboardEvent");更改为evt = document.createEvent("KeyboardEvent");。

我得到一个“TypeError：evt.initKeyboardEvent不是一个函数” firefox 12.0

那是因为在firefox中该函数被称为initKeyEvent。这是一个支持firefox和google chrome的代码：

textbox = document.getElementById("inputfield")
textbox.value = "word";

  var evt = document.createEvent("KeyboardEvent");

  var keyEventFunction = (evt.initKeyboardEvent ? "initKeyboardEvent" : "initKeyEvent");

evt[keyEventFunction](
                   "keyup",
                    true, 
                    true, 
                    window, 
                    false, 
                    false, 
                    false, 
                    false,
                    32, 
                    0 
);

textbox.focus();
textbox.dispatchEvent(evt);

和演示：http://jsfiddle.net/Y674s/2/

<强> UPD：

当您在控制台中运行代码时，焦点会设置为您的字段，但您可以看到它。要查看它，请修改输入HTML，如下所示：

<input id="inputfield" type = "textfield" onblur="alert('focus was in textfield')">

onblur事件仅在某些字段被聚焦的情况下发生，但后来焦点被移动到其他地方。现在，在控制台中运行代码，然后单击页面正文中的某个位置。您将看到该警报出现。如果您只是打开页面而不运行该代码，则不会显示aler。

专注于元素然后导致keydown或keyup空间事件

2 个答案: