2

我有一组 3 个可编辑的 pre 标签。当有人在其中一行上并点击“输入”时，我希望它在它所在的下面（在文档树中）插入一个新标签。我试图在标签上放置一个事件处理程序以便发生这种情况，但“onkeypress”似乎没有被触发。

<script>
    function handlers(){
        var pres = document.getElementsByTagName("pre");
        for(i=0; i<pres.length;i++){
            pres[i].addEventListener("onkeypress", function(e){
                if(e.which != 13) return;//the ENTER key
                var tag = e.srcElement;
                if(tag.nextSibling){
                    var next = tag.nextSibling;
                    var newPre = document.createElement('pre');
                    tag.nextSibling = newPre;
                    newPre.nextSibling = next;
                }
            var tree = document.getElementById("tree");
            tree.innerHTML = document.getElementByTagName().length;
            });
        }
    }
</script>
<body onload="handlers();">
    <div id="editor" contentEditable="true">
        <pre>1</pre>
        <pre>2</pre>
        <pre>3</pre>
    </div>

    <div>
    <p id="tree"></p>
    </div>
</body>
4

2 回答 2

4

您错误地迭代了元素数组，并且没有正确附加事件侦听器。

我建议将您的 for 循环更改为：

for (var i=0, l=pres.length; i<l; i++) {
    pres[i];//This is where the Element is stored
}

您可以在此处阅读有关附加事件侦听器的信息

此外，它会出现： http: //jsfiddle.net/vZYpX “contentEditable”下的按键事件的来源是“contentEditable”的实际元素。因此，您必须使<pre>s 内容可编辑（而不是 div），或者将侦听器附加到父 div（当前为 contentEditable）。

于 2012-01-06T22:40:30.693 回答
0

我不确定是否可以从“pre”标签中触发“onkeypress”。

不过我有一个建议： 1. 注册 document.onmousemove 来检测鼠标位置。2.注册document.onkeypress事件，当检测到'enter'键时，检查鼠标是否在'pre'标签上。如果是这样，请运行您的代码。

它应该如下所示：

function moveMoveHandler(e)
{
    var evt = window.event || e;
    window.lastMouseX = evt.clientX;
    window.lastMouseY = evt.clientY;
}


function keypressHandler(e)
{
    var evt = window.event || e;

    // handling only 'enter' key
    if (evt.keyCode !== 13) return;

    // getting the element the mouse is on
    var elem = document.elementFromPoint(window.lastMouseX,window.lastMouseY);
    var node = elem;
    // checking if the found node is a child of a 'pre' node
    while (node.nodeName !== "PRE" && node !== document.body)
          node = node.parentNode;        

    if (node.nodeName === "PRE")
    {
         ... INSERT YOUR CODE HERE ...
    }
}


// IE
if (window.attachEvent)
{
   document.attachEvent("onkeypress", keypressHandler);
   document.attachEvent("onmousemove", moveMoveHandler);
}
// other browsers
else 
{
   document.addEventListener("keypress", keypressHandler, false);
   document.addEventListener("mousemove", moveMoveHandler, false);
}
于 2012-01-06T23:18:39.987 回答