keyup 事件在 contenteditable:true 标记内不起作用答案

【问题标题】：keyup event not working inside contenteditable:true tagkeyup 事件在 contenteditable:true 标记内不起作用
【发布时间】：2014-06-27 09:16:16
【问题描述】：

我不知道我的代码有什么问题。我的keyup 事件不会在contenteditable 标签内触发。这是我的代码：

 $(document).on( 'keyup' , '#editable_div span' ,function (e) {
                    e.preventDefault();
                    $(this).removeClass('abc');
                });

Fiddle 示例

【问题讨论】：

接收击键事件的是contenteditable，而不是其中的跨度。从您的选择器中省略 span 并且您的处理程序会触发。您可能需要使用选择 API 来找到合适的 span。
请在您提出问题时检查回复并进行验证。

标签： javascript jquery contenteditable

【解决方案1】：

我已经更新了小提琴并按照您想要的方式进行了这项工作。请试试这个：

http://jsfiddle.net/W2P9t/7/

JS代码：

var spansContent  = Array();
$("#editable_div span").each(function(){
   spansContent.push($(this).html()); 
});



    $(document).on( 'keyup' ,function (e) {
                        e.preventDefault();
                        for(var i=0;i<spansContent.length;i++)
                        {
                            if($($("#editable_div span")[i]).html()!=  spansContent[i]) {
                            $($("#editable_div span")[i]).removeClass('abc');
                            }
                        }

                    })

HTML：

<div id="editable_div" contenteditable="true">
    <span class="abc">hello1</span>
    <span>hello2</span>
    <span class="abc">hello3</span>
    <span class="abc">hello4</span>
    <span>hello5</span>
    <span class="abc">hello6</span>
</div>

CSS：

.abc{color:red;}

【讨论】：

老兄它的工作，去小提琴链接。点击运行，然后测试！
可能你没有在小提琴左面板中包含 jquery ..我可以看到它在我的末端工作..每当编辑跨度时，红色就会消失。这是需要的
jsfiddle.net/YFJVD/4 检查这个小提琴它很简单，但解决了目的
如果他在那个 div 下有 1000 个跨度怎么办。他不会将 contenteditable=true 添加到每个跨度。你应该把它变成动态的。
我也没有改变他的html部分并设法通过js实现输出，这是应该做的。