用於插入新預標籤的JavaScript事件處理程序

我有一組3個可編輯的預標籤。當某人在其中一條線上並點擊'輸入'時，我希望它在下面（在文檔樹中）插入一個新標籤，它位於該標籤上。我試圖在標籤上放置一個事件處理程序，以便發生這種情況，但'onkeypress'似乎沒有被解僱。用於插入新預標籤的JavaScript事件處理程序

<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>

來源

2012-01-06 Chris

您正在迭代元素數組，但未正確附加事件偵聽器。

我建議改變你的for循環：

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

您可以在安裝事件偵聽器here

而且閱讀起來，它會出現：http://jsfiddle.net/vZYpX的按鍵事件的「CONTENTEDITABLE」下的源是「contentEditable」的實際元素。因此，您必須使<pre>的內容可編輯（而不是div），或將偵聽器附加到父div（即當前的contentEditable）。

來源

2012-01-06 22:40:30 Shad

哦哎呦我做的蟒蛇的迭代是通過一個數組，而不是通過JS的屬性。我相應地修改了它，並添加了正確的事件偵聽器，但仍然沒有看到任何東西 – Chris 2012-01-07 02:54:51

@Chris addEventListener採用不帶'on'前綴的事件類型。例如'pres [i] .addEventListener（「keypress」，function（e）{' – Shad 2012-01-07 03:00:34

）哦，他們只是偷偷摸摸地對着你。好吧，現在很好，我在函數的開頭部分提醒一下，看它是否得到 – Chris 2012-01-07 03:42:37

我不確定''onkeypress'可以從'pre'標籤中被解僱。

但是我有一個建議： 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-06 23:18:39 Omeriko

pre有一個onkeypress處理程序，因爲它是可編輯的。解決方案的問題在於，當輸入被擊中時，鼠標可能不會懸停在該特定的預標籤上。需要擔心IE :) – Chris 2012-01-07 02:56:34

克里斯，我不知道我理解你的評論。在我的解決方案中，當用戶點擊'輸入'鍵時，我們檢查鼠標是否懸停了預標籤，並且可以輸入任何您想要的條件... – Omeriko 2012-01-07 13:16:03

用於插入新預標籤的JavaScript事件處理程序

回答

相關問題