JavaScript：onkeyup() 的原始目标

Posted 2023-02-21

【中文标题】JavaScript：onkeyup() 的原始目标

【英文标题】：JavaScript: Original target of onkeyup()

【发布时间】：2011-07-15 20:48:51

【问题描述】：

我有一个包含许多动态插入跨度的 contentEditable 字段。

当我从 onclick() 事件中使用 getTarget() 时，我将目标作为各自的跨度，但使用 onkeyup() 和 onkeydown() 它将目标作为调用函数的 div (我正在使用冒泡来捕获事件（如果我是正确的））

function getTarget(e)

    var targ;
    if (!e)
       var e = window.event;
    if (e.target)
       targ = e.target;
    else if (e.srcElement)
       targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
       targ = targ.parentNode;
    return targ;

有人能指出为什么会这样吗？ 谢谢你

注意： 事实上，我只是注意到 span 不接受 onkeydown、onkeyup 或 onkeypress。仅触发 onclick 事件。如何让 span 接受 key 事件？

<div class="myedit" onclick="setcontext(event);" 
                onkeydown="getCursorPos();checkmarkup(this,event);"
                    contentEditable="true" >

                    <span class="context global" >global <br/>

                    <span class="context function" >
                     fun1 hi bye   
                     </span>

                     <div>
                        <span class="context function">
                        fun2
                        </span>
                     </div>

                 </span>
</div>

这是 html 部分。请注意，我可以通过单击它们或将光标移动到它们来编辑文本“global”或“fun1 hi bye”或“fun2”。如果我错了，请纠正我，但据我了解，span 能够接收关键事件（因为它能够更改其内容），因此它应该引发关键事件。 此外，即使我在每个 span 上添加 contenteditable='true' 和 onkeydown="alert('keytest')"，它仍然不会引发事件。

如果无法在span 上捕获关键事件，那么我是否可以使用任何其他元素来捕获关键事件但不会改变结构？

【问题讨论】：

请将代码缩进四个空格，而不是 HTML 转义。

你不能真正按下“on”键 span 或 div - 我猜你的意思是你在嵌套在 span 或 @987654331 下方的某个表单元素中按下一个键@标签？

@Shadowwizard：我的意思是 div 或 span 中的文本。大多数文本将包含在 span 中。

@diff 你不能。一种解决方法是捕获全局document.onkeyup 事件，在范围onmouseover 中提高一个标志，在范围onmouseout 和全球keyup 事件检查中降低该标志：如果该标志被提高，这意味着键在悬停在跨度上时被按下，否则不是。希望这是有道理的，如果你需要我可以举个简单的例子。

我无法想象跨度上的按键，你能发布你的 HTML 吗？

【参考方案1】：

只有满足以下两个条件时，您才会收到元素上的关键事件：

元素可以接收焦点。 （对于非输入元素，这意味着contenteditable="true" 或元素具有tabindex 属性）。

元素有焦点。

听起来您已经在使用可编辑元素了。但是，请注意，如果您在 contenteditable 元素中有不可编辑的跨度，您仍将只接收父元素的事件。 您还必须使 span 可编辑，并为其指定焦点。 编辑：您实际上不能在另一个 contenteditable 中拥有 contenteditable 元素。外部元素始终获得焦点，即使您在内部元素上手动调用 .focus()。

【讨论】：

抱歉，我该如何“分配焦点”？

@diffthinkr document.getElementById('foo').focus()（或 $('#foo').focus() 使用 jQuery）。

@Nathan Ostgard ：谢谢，但这意味着我必须通过代码来完成，对吧？那么我需要检测用户选择的单词没有满足！另外，如果某些文本被输入到某个区域，那是否意味着它已经有了焦点？

@diffthinkr 啊，我刚刚看到您添加了 HTML。我犯了一个错误：您不能将 contenteditable 嵌套在 contenteditable 中。我不认为你可以做你想做的事，因为这意味着在主 div 上禁用 contenteditable。你是在尝试语法高亮还是什么？

@Nathan ：是的，我正在研究语法高亮。我已经找到了适用于 IE 以外的浏览器的解决方法。我想知道如果主要参与者不遵守标准，为什么人们会制定标准！！！

【参考方案2】：

我找到了解决方法（但不适用于 IE）：

function getCurrentElement() //the one in which cursor is there

   if (window.getSelection)
   
    return window.getSelection().anchorNode.parentNode;
   
   else if (document.selection)
       
        alert( "IE not yet supported or tested !!");
       

但我仍然对上述查询感兴趣。 PS.如果有人知道 IE 的等效方法，请告诉我。