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

【问题标题】：How do I fill an element using keypress event如何使用按键事件填充元素
【发布时间】：2015-11-15 14:13:34
【问题描述】：

这是代码：

<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 浏览器。该项目与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 实现这一点。

【问题讨论】：

你想制作一个输入元素吗？
您已经展示了处理键盘事件的绝对零代码 - 您需要展示您实际尝试和未能实现的目标，然后任何人才能为您指明正确的方向
我已经提到它是一个cefsharp项目。我正在尝试用 javascript keypress 事件填充 span 元素
@jaromanda-x 除此以外没有其他代码。其余代码在c#中。
所以，没有代码处理按键事件 - 如果没有代码处理按键事件，那么对按键事件做任何事情都非常困难，你不同意吗？而C#代码在浏览器中是完全不相关的

标签： javascript dom-events cefsharp chromium-embedded

【解决方案1】：

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

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

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

【讨论】：

谢谢，但该教程已更改，我无法正常工作。也搜索了但没有找到任何适合我的目的的确切教程。
什么教程？该代码是针对不同的错误，概念基本相同，您可以发送单个按键。只需要确保浏览器有焦点，您也可以通过编程方式完成。
我发现的问题是，如何将焦点设置为控件。例如，如果我的输入框在一个名为“sample”的类中，我可以使用脚本来获取它，但是如何将焦点设置到该元素中？
在浏览器控件上设置焦点，然后使用javascript设置元素焦点。然后发送各个击键。它不是最优雅的，它应该可以完成工作。你有一个稍微不寻常的要求。

【解决方案2】：

为您的跨度添加样式

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

【讨论】：

如果这就是答案，即使有一点点相关，我也会向你惊人的读心能力低头！！
感谢您的风格：D
也许你应该解释一下这段代码的作用以及你为什么建议这个解决方案。因为这个答案因其长度和内容而被标记为低质量，并且可能会被评论者简单地删除。

【解决方案3】：

这是你的意思吗？ JS-FIDDLE

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

【讨论】：

没有。我需要用键盘事件填充 span 元素。
你是什么意思keyboard events ...键盘事件不是可以在HTML中显示的一段文本，它是一个事件
@jaromanda-x 我想用键盘输入的文字，这就是我的意思。我知道键盘事件不能在 HTML 中显示。只有当我从 keyenter 事件中触发时，事情才会实现。
现在我明白了。我已经更新了 JS-Fiddle。看看它，告诉我你是不是这样。
@salmin-skenderovic 抱歉，这不是我想要的