Обработчик событий JavaScript для вставки нового предварительного тега - PullRequest
Новая
       17

Обработчик событий JavaScript для вставки нового предварительного тега

2 голосов
/ 07 января 2012

У меня есть набор из 3 предварительных тегов, которые можно редактировать. Когда кто-то находится в одной из строк и нажимает «enter», я хочу, чтобы он вставил новый тег ниже (в дереве документа), в который он включен. Я попытался поместить обработчик событий в теги, чтобы это произошло, но «onkeypress», похоже, не запускается. 

<code><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
2
3

Ответы [ 2 ]

4 голосов
/ 07 января 2012

Вы перебираете массив элементов неправильно и неправильно подключаете прослушиватели событий.

Я рекомендую изменить цикл 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> редактируемым (а не div), либо присоединить слушателя к родительскому div (который в данный момент является contentEditable).

0 голосов
/ 07 января 2012

Я не уверен, что 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);
}
...