Отображение позиции событий в позиции текста в нетекстовыми полей

Question

Есть ли способ, чтобы отобразить такие события, как клик-события на этом элементе

<div>Just normal text</div> 

в положение в выводимого текста («You просто нажал на 6-й символ ", когда нажал« n »)?

Answer 1

Я не знаю, какой способ достичь этого, но у меня есть решение, которое будет работать, хотя оно уродливо.

Вы можете обернуть каждую букву вашего div текстом в поле let span и добавить уникальные идентификаторы для каждой буквы. Затем вы подключаете обработчики событий для тех элементов span, а не весь div, и на основе идентификатора span вы можете указать, какой символ был этим.

Все это можно сделать в JS, но, как я уже сказал, это не идеальное решение.

Вот пример (я добавил test id в div, чтобы мне было легче).

var letters = $('#test').text(); 
var spans = ''; 
for (var i = 0; i < letters.length; i++) { 
    spans += '<span id="id' + i + '">' + letters[i] + '<span>'; 
} 
$('#test').html(spans); 

$('span[id^=id]').click(function() { 
    alert('Clicked char: ' + (Number($(this).attr('id').substring(2)) + 1)); 
    return false; 
}); 

Вы также можете дать ему попробовать на моем demo.

Answer 2

Не как таковой; Я думаю, вам придется разбивать каждый символ на элемент <span>, либо на стороне сервера, либо с помощью JQuery.

Answer 3

Вот хакерский способ, который можно было бы сделать для работы: он требует временного редактирования документа и изучения выбора. Он должен работать в Firefox 3+, IE 6+, последних Safari и Chrome.

Как он стоит, есть некоторые проблемы, я могу видеть:

• Результаты в IE отличаются от других браузеров: IE считает все символы в целом, не содержащие элемент вплоть до каре в то время как другие браузеры дать смещение в текстовом узле , но вы можете обойти это;
• появится рамка вокруг текущего элемента в некоторых браузерах
• не работает в Opera или Firefox 2, и листы документа редактируемые
• Возможности других глюков интерфейса: это противно взломать.

Код:

window.onload = function() { 
    var mouseDownEl; 

    document.onmousedown = function(evt) { 
     evt = evt || window.event; 
     var el = evt.target || evt.srcElement; 
     if (evt.srcElement || !("contentEditable" in el)) { 
      document.designMode = "on"; 
     } else { 
      el.contentEditable = "true"; 
     } 

     mouseDownEl = el; 
    }; 

    document.onclick = function(evt) { 
     evt = evt || window.event; 
     var el = evt.target || evt.srcElement; 
     if (el == mouseDownEl) { 
      window.setTimeout(function() { 
       var caretPos, range; 
       if (typeof window.getSelection != "undefined") { 
        caretPos = window.getSelection().focusOffset; 
       } else if (document.selection && document.selection.createRange) { 
        range = document.body.createTextRange(); 
        range.moveToElementText(el); 
        range.collapse(); 
        range.setEndPoint("EndToEnd", document.selection.createRange()); 
        caretPos = range.text.length; 
       } 

       if (el.contentEditable == "true") { 
        el.contentEditable = "false"; 
       } else { 
        document.designMode = "off"; 
       } 
       alert(caretPos); 
      }, 1); 
     } else { 
      if (mouseDownEl.contentEditable == "true") { 
       mouseDownEl.contentEditable = "false"; 
      } else { 
       document.designMode = "off"; 
      } 
     } 
     mouseDownEl = null; 
    }; 
};