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

How do I fill an element using keypress event

本文关键字：填充 元素 事件 何使用      更新时间：2023-09-26

这是代码：

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

我要做的是用keypress事件填充一个元素。

<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';
}

基本上这个功能可以完成工作，但在我尝试的网站上不起作用。如果我从键盘输入它，它工作得很好。窗口正在侦听keyenter事件。我正在使用Chrome浏览器。该项目与头孢夏普有关。

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);
}

我已经用按键模拟检查了输入填充

因此，请帮助我如何使用纯JavaScript实现这一点。

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

SendKeyEvent可以用于一次发送一个字符。

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

为您的span 添加样式

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

这就是你的意思吗？JS-FIDDLE

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