![](/img/trans.png)
[英]How to call keypress event in span tags inside contenteditable true div in vuejs / vue.js?
[英]Span tag inside contentEditable div needs keypress event
我的 html 代码中有以下 div:
<div id="expanderInput" tabIndex="1" contentEditable></div>
我使用contentEditable
div 作为制作自动扩展文本框的简单、跨浏览器方法。 我也在对用户输入到这个 div 的内容进行输入验证。 它应该是由逗号分隔的电子邮件地址列表。 当用户尝试提交不正确的信息时,我的 Javascript 将输入分块并以红色突出显示所有不正确的块。
//split the address into the comma-separated chunks
var chunks = splitForward(forwardsTo);
//Grab each bad chunk one at a time and stick it in a span with a red-colored text
for(var i = 0; i < invalids.length; i++)
{
var current = chunks[invalids[i]];
current = '<span class="highlighted">' + current + '</span>';
chunks[invalids[i]] = current;
}
$("#expanderInput").html(chunks.join());
initHighlighted();
数组 'invalids' 包含所有坏块的索引。 到目前为止一切正常。 但是一旦用户开始在红色文本中输入,我需要红色消失,但只是在那个范围内。 例如,如果有两个坏块,每个都用红色突出显示,用户开始修复一个,另一个需要保持红色。
我尝试将事件侦听器附加到跨度:
initHighlighted = function()
{
$(".highlighted").keypress(function()
{
alert("It works!");
});
};
但是该事件永远不会发生,即使用户编辑红色文本也是如此。 使用浏览器的开发人员工具,我可以看到事件处理程序就在那里,只是永远不会被触发。 是 div 上的contentEditable
属性导致跨度接收事件吗? 我也试过让跨度本身contentEditable
,但行为仍然相同。
除非我弄错了,否则这应该可以解决您的问题:
initHighlighted = function()
{
$(".highlighted").live("keypress",function()
{
alert("It works!");
});
};
因为您的跨度是在 DOM 初始加载后添加的,所以没有附加按键事件侦听器,因为没有任何东西可以附加它们。 Jquery 的live
会通过将这些侦听器附加到任何带有“突出显示”类的内容(无论何时将它们添加到 DOM 中)来为您解决这个问题。
阅读 Jquery 站点上的文档以获得比我能给你的更好的解释: http : //api.jquery.com/live/
编辑:我很抱歉没有正确阅读您的问题并意识到您在添加“突出显示”跨度后附加了按键侦听器。
你有没有读过这个:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.