JavaScript:将关键事件模拟​​到文本框/输入中

时间:2013-07-26 12:02:48

标签: javascript input keydown simulate

尽管在JS上有很多关于如何模拟按键(keydown / keypress)的文章,但似乎没有一个解决方案可以使用我正在使用的浏览器(Firefox ESR 17.0.7,Chrome 28.0.1500.72,IE 10) )。我测试过的解决方案来自hereherehere

我要做的是模拟textarea / input中的任何击键。虽然我可以追加/删除直接更改“值”的字符,但我看不到选项,只能输入“Up”,“Down”,“Home”等键的模拟。

根据documentation,它应该很简单。例如:

var e = document.createEvent("KeyboardEvent");
if (e.initKeyboardEvent) {  // Chrome, IE
    e.initKeyboardEvent("keydown", true, true, document.defaultView, "Enter", 0, "", false, "");
} else { // FF
    e.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, 13, 0);
}
document.getElementById("text").dispatchEvent(e);

确实触发了“Enter”keydown事件,我的处理程序可以捕获它。但是,它不会以任何方式影响textarea - 不会出现新行。其他键码相同:不显示字符,箭头不改变插入符号的位置等。

我已将代码扩展为Orwellophile并将其发布到http://jsfiddle.net/npF3d/4/,因此任何人都可以使用代码。在我的浏览器中,在任何情况下都没有按钮对textarea产生任何影响。

我很感激在这个问题上的任何帮助。

2 个答案:

答案 0 :(得分:7)

我很确定这是一个“安全”的事情,因为我在尝试模拟按键之前遇到了同样的事情。

问:那我怎么能以编程方式输入呢? 答:获取/设置 selectionStart selectionEnd 等,并将这些与 String 方法结合使用,例如slice字符。 (参见HTMLTextAreaElement参考)

问:那你为什么还会使用这种活动呢? 答:所有的事件监听器都会像真正的关键事件那样工作。


因此可以实现箭头/ home / end的减少功能DEMO

function homeKey(elm) {
    elm.selectionEnd =
        elm.selectionStart =
            elm.value.lastIndexOf(
                '\n',
                elm.selectionEnd - 1
            ) + 1;
}

function endKey(elm) {
    var pos = elm.selectionEnd,
        i = elm.value.indexOf('\n', pos);
    if (i === -1) i = elm.value.length;
    elm.selectionStart = elm.selectionEnd = i;
}

function arrowLeft(elm) {
    elm.selectionStart = elm.selectionEnd -= 1;
}

function arrowRight(elm) {
    elm.selectionStart = elm.selectionEnd += 1;
}

function arrowDown(elm) {
    var pos = elm.selectionEnd,
        prevLine = elm.value.lastIndexOf('\n', pos),
        nextLine = elm.value.indexOf('\n', pos + 1);
    if (nextLine === -1) return;
    pos = pos - prevLine;
    elm.selectionStart = elm.selectionEnd = nextLine + pos;
}

function arrowUp(elm) {
    var pos = elm.selectionEnd,
        prevLine = elm.value.lastIndexOf('\n', pos),
        TwoBLine = elm.value.lastIndexOf('\n', prevLine - 1);
    if (prevLine === -1) return;
    pos = pos - prevLine;
    elm.selectionStart = elm.selectionEnd = TwoBLine + pos;
}
问:哪里出错了?
答:如果线条足够长以便包裹,它会将它们视为未包装。

答案 1 :(得分:0)

可以通过Selenium实现向浏览器发送密钥:http://docs.seleniumhq.org/

它为每个可编程的浏览器提供驱动程序。它通常从打开URL开始,然后您的脚本将充当浏览器的远程控制。因此,允许您发送实际密钥而不是模拟它们,这在浏览器中以编程方式无法实现。

您可以使用http://webdriver.io/

来实现此目的