Inhaltsveränderbare Änderungsereignisse

Question

Ich möchte eine Funktion ausführen, wenn ein Benutzer den Inhalt eines div con contenteditable Attribut. Was ist das Äquivalent eines onchange Veranstaltung?

Ich verwende jQuery, daher ist jede Lösung, die jQuery verwendet, vorzuziehen. Danke!

Answer 1

In Angular 2+

<div contentEditable (input)="type($event)">
   Value
</div>

@Component({
  ...
})
export class ContentEditableComponent {

 ...

 type(event) {
   console.log(event.data) // <-- The pressed key
   console.log(event.path[0].innerHTML) // <-- The content of the div 
 }
}

Answer 2

Hier ist die Lösung, die ich am Ende verwendet habe und die fabelhaft funktioniert. Ich verwende $(this).text() stattdessen, weil ich nur eine einzeilige div, die Inhalt editierbar ist. Sie können aber auch .html() verwenden. Auf diese Weise müssen Sie sich nicht um den Geltungsbereich einer globalen/nicht-globalen Variablen kümmern, und das "Before" ist tatsächlich mit dem Editor-Div verbunden.

$('body').delegate('#editor', 'focus', function(){
    $(this).data('before', $(this).html());
});
$('#client_tasks').delegate('.task_text', 'blur', function(){
    if($(this).data('before') != $(this).html()){
        /* do your stuff here - like ajax save */
        alert('I promise, I have changed!');
    }
});

Answer 3

Um Timer und "Speichern"-Schaltflächen zu vermeiden, können Sie das Blur-Ereignis verwenden, das ausgelöst wird, wenn das Element den Fokus verliert. Aber um sicher zu sein, dass das Element tatsächlich geändert wurde (nicht nur fokussiert und defokussiert), sollte sein Inhalt mit seiner letzten Version verglichen werden. oder verwenden Sie das Keydown-Ereignis, um ein "Dirty"-Flag für dieses Element zu setzen.

Answer 4

Sie müssen Folgendes verwenden Eingabe Veranstaltungstyp

Demo

HTML

<div id="editor" contenteditable="true" >Some text here</div>

JS

const input = document.getElementById('editor');

input.addEventListener('input', updateValue);

function updateValue(e) {
  console.log(e.target);
}

mehr wissen

Answer 5

Ich möchte prüfen, ob die Eingabe gültig ist oder nicht.

Wenn gültig, dann aktualisieren, andernfalls eine Fehlermeldung anzeigen und den Wert beibehalten.

Geschicklichkeit: Wenn Sie mit der Bearbeitung fertig sind, wird normalerweise die Unschärfe Veranstaltung.

Beispiel

<span contenteditable="true">try input somethings.</span>
<script>
  const elem = document.querySelector(`span`)
  let oldValue = elem.innerText
  elem.onkeydown = (keyboardEvent) => {
    if (keyboardEvent.key === "Enter") {
      elem.blur() // set focusout
    }
  }
  elem.onblur = (e) => {
    const curValue = elem.innerText
    if (curValue === oldValue) {
      return
    }
    if (curValue.length <= 50) { //  Input your conditions.
      //  fail
      elem.innerText = oldValue

      // (Optional) Add error message
      elem.insertAdjacentHTML("beforeend", `<span style="margin-left:5px;color:red">error length=${curValue.length}. Must greater than 50. undo to the previous value.</span>`)
      const errMsg = elem.querySelector(`span`)
      setTimeout(() => errMsg.remove(), 3500) // wait 3.5 second, and then remove it.
      return
    }
    //  OK, update
    oldValue = curValue
  }
</script>