我有一组3个可编辑的预标记。当某人在其中一行并点击“回车”时,我希望它在它所在的行下面(在文档树中)插入一个新标记。我试着在标签上放置一个事件处理程序,这样就会发生这种情况,但是“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>

最佳答案

您在元素数组上的迭代不正确,并且未正确附加事件侦听器。
我建议将for循环更改为:

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

您可以阅读附加事件侦听器here
另外,“contentEditable”下的keypress事件源是“contentEditable”的实际元素。因此,您必须使<pre>的内容可编辑(而不是div),或者将侦听器附加到父div(当前是content editable)。

关于javascript - JavaScript事件处理程序以插入新的pre标签,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/8765289/

10-12 00:14
查看更多