Имате ли идея как един span елемент най-културно да реагира, когато текстовия курсор влезе в него? Тук говорим за вариант при който някакъв обхващащ span-а елемент е зададен като contenteditable=true.
За нещо такова ли става дума ?
<div contenteditable="true" id="editor">
<span>Please type something in here</span>
</div>
<textarea id="log" rows="10" cols="40" readonly></textarea>
document.getElementById("editor").addEventListener("input", function() {
document.getElementById("log").value += "input event fired\n";
}, false);
Не защото събитието "input" реагира само при промяна. Цели се реакцията да имаме при самото влизане на курсора. Освен това ми се иска и да има реакция при излизането/изчезването на последния, но това вече е по-трудно и си е вид втора задача.
За момента се сещам само за вариант при прихващане на събития onclick, onkeypress и onfocusout и съответни специфични проверки вътре, но това определено не е най-културния начин.
<div contenteditable="true" id="someDiv">
testtstsdsds
</div>
<textarea id="log" rows="10" cols="40" readonly></textarea>
function setChangeListener (div, listener) {
div.addEventListener("blur", listener);
div.addEventListener("keyup", listener);
div.addEventListener("paste", listener);
div.addEventListener("copy", listener);
div.addEventListener("cut", listener);
div.addEventListener("delete", listener);
div.addEventListener("mouseup", listener);
}
var div = document.querySelector("#someDiv");
setChangeListener(div, function(event){
document.getElementById("log").value += event+"\n";
});
Само mouseup не е достатъчно, а трябва и други събития да се прихванат. Освен това има още много да се прави, защото аз не искам нещата да са за div, а за съдържан в него span! Т. е. говорим за събитие, което интуитивно можем да опишем като "onSelectionChange" (защото самият курсор си е всъщност точно такъв вид селекция като се борави с него).