Question

这是代码。

<div class="sampletext" contenteditable="true" style="min-height: 40px;">
<span></span>
</div>

我要做的是用按键事件填充元素。

<div class="sampletext" contenteditable="true" style="min-height: 40px;">
<span>i need  to fill here with keyboard events. {ENTER}</span>
</div>

我已经编写了一个填充innerHtml的基本函数，

function myFunction() 
{
    var element = document.getElementsByClassName('sampletext')[0].firstChild;
    element.innerHTML = 'i need  to fill here with keyboard events.\n';
}

基本上这个功能可以完成这项工作。但它不适用于我正在尝试的网站。如果从键盘输入它，它可以很好地工作。窗口正在侦听密钥中心事件。我正在使用Chrome浏览器。该项目与cefsharp有关。

private void SampleFucntion()
{
    string script = "var element = document.getElementsByClassName('sampletext')[0].firstChild;element.innerHTML = 'i need  to fill here with keyboardevents.\n';";
    myBrowser.ExecuteScriptAsync(script);
}

我已经检查了input fill with keypress simulation

所以请帮助我如何使用纯javascript实现这一目标。

Answer 1

为您的范围添加样式

<div class="sampletext" contenteditable="true" style="min-height: 40px;">
   <span style="display:inline-block; width:100%; height:100%;"></span>
</div>

Answer 2

这是什么意思？ JS-FIDDLE

document.addEventListener("keyup", function(e){
    var target = document.getElementById("here");
    var value = String.fromCharCode(e.keyCode);
    if (value!="undefined") {
        target.innerHTML += value;
    }
});

Answer 3

您实际上可以直接向浏览器发送击键，这可能比执行一个javascript块更容易。假设文本框当然具有焦点。

SendKeyEvent可用于一次发送一个角色。

CefSharp.WPF.Example项目中有一个基本示例。 https://github.com/cefsharp/CefSharp/blob/cefsharp/43/CefSharp.Wpf.Example/Views/BrowserTabView.xaml.cs#L32

javascript如何使用按键事件填充元素

3 个答案: