1

我目前正在使用 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 的控制台执行代码，我不知道这是否会有所作为。

谢谢

4

2 回答 2

0

您只需触发一个事件。但它不会改变一个值，“word”不会变成“word”。不知道为什么它不能从控制台工作，但可能是你在那里遗漏了一些重要的东西。可能是因为 var （我已经注意到这个问题几次）。尝试更改 var evt = document.createEvent("KeyboardEvent");为简单evt = document.createEvent("KeyboardEvent");。

我在 firefox 12.0 上收到“TypeError：evt.initKeyboardEvent 不是函数”

那是因为在 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/

升级版：

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

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

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

于 2013-01-30T15:34:47.387 回答
0

您的标记不正确，html标签未出现在正文中。

应该是这样的：

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

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

于 2013-01-30T15:23:40.683 回答