Javascript, um Eingabefeld im Bearbeitungsmodus (Einfügemodus) zu erstellen

Question

Wie ist es möglich, ein Eingabefeld in JavaScript bearbeitbar zu machen? Ich meine, onFocus, um es im Einfügemodus zu setzen, damit Werte überschrieben werden können. Irgendwelche Vorschläge ???

Answer 1

Dies sollte in modernen Browsern funktionieren (auch auf Mobilgeräten):

const input = document.querySelector('input'); // oder ein Textfeld
input.addEventListener('keypress', function() {
  const s = this.selectionStart;
  this.value = this.value.slice(0, s) + this.value.slice(s + 1);
  this.selectionEnd = s;
}, false);

Hinweis: Dies ist eine grundlegende Form der Einfügefunktionalität, daher können einige Standardfunktionen wie STRG+Z beeinträchtigt sein.

Answer 2

Nachdem ich ein wenig gegoogelt habe, scheint dies damit zusammenzuhängen. Es könnte funktionieren, wenn man ein wenig mit folgendem Code herumspielt, aber es könnte nur in bestimmten Browsern auf spezifischen Betriebssystemen funktionieren. Es ist jedoch einen Versuch wert.

document.execCommand('OverWrite', false, true);
document.execCommand('OverWrite', false, false);

Wie von Ihnen angefordert, würde die Implementierung ungefähr so aussehen:

Answer 3

EDIT: Kann je nach Bedeutung hinter der Frage völlig off-topic sein.

Wenn Sie jQuery verwenden können, ist Jeditable ein schönes Plugin, um genau das zu tun.

Wenn Sie Ihren eigenen Code schreiben müssen, werfen Sie einen Blick darauf, wie das Plugin funktioniert, und verwenden Sie es als Ausgangspunkt.

Im Grunde genommen sind die Schritte:

1. onFocus/onClick - Tauschen Sie Ihr Feld mit einem Eingabefeld aus.
2. Wenn der Benutzer "fertig" ist (Enter drücken, auf eine Schaltfläche klicken), senden Sie das Ergebnis über Ajax an den Server zurück.
3. Wenn Ihre Anforderung abgeschlossen ist, aktualisieren Sie die Benutzeroberfläche mit dem neuen Wert und verstecken Sie das Eingabefeld.

Answer 4

Sie können versuchen, den Einfügemodus zu imitieren, indem Sie den Eingabewert bei keyup neu schreiben:

var input = $('input'); // Ihr Eingabeelement

Event.observe(input, 'keydown', function(e) { // Ereignisbehandler
   input._lastvalue = input.value;
});

Event.observe(input, 'keyup', function(e) { // Ereignisbehandler
    if(input.value == input._lastvalue) return;
    if(input.value.length <= input._lastvalue.length) return;
    var caretPos = doGetCaretPosition(input);
    input.value = input.value.slice(0,caretPos) + input.value.slice(caretPos+1);
    doSetCaretPosition(input, caretPos);
});

Hier ist eine Demo : http://jsfiddle.net/z6khW/