<bgdev />free

Вход Регистрация

on contenteditable
1

#25058 (ツ) code2
Създадено на 30.12.2020, видяно: 328 пъти.

Имате ли идея как един span елемент най-културно да реагира, когато текстовия курсор влезе в него? Тук говорим за вариант при който някакъв обхващащ span-а елемент е зададен като contenteditable=true.

#25059 (ツ) Delegate
Последно редактирано на 30.12.2020 от Delegate, видяно: 324 пъти.

За нещо такова ли става дума ?

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

#25061 (ツ) code2
Създадено на 30.12.2020, видяно: 318 пъти.
Delegate

За нещо такова ли става дума ?

<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 и съответни специфични проверки вътре, но това определено не е най-културния начин.

#25065 (ツ) Delegate
Създадено на 30.12.2020, видяно: 305 пъти.
<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";
});
#25068 (ツ) code2
Създадено на 30.12.2020, видяно: 300 пъти.

Само mouseup не е достатъчно, а трябва и други събития да се прихванат. Освен това има още много да се прави, защото аз не искам нещата да са за div, а за съдържан в него span! Т. е. говорим за събитие, което интуитивно можем да опишем като "onSelectionChange" (защото самият курсор си е всъщност точно такъв вид селекция като се борави с него).

on contenteditable
1

AsmBB v2.9 (check-in: e72809fde8a3357c); SQLite v3.31.1 (check-in: 3bfa9cc97da10598);
©2016..2020 John Found; Licensed under EUPL. Powered by Assembly language Created with Fresh IDE