it-swarm.com.de

Einfügen von Text in Textbereich an der Cursorposition (Javascript)

Ich möchte eine einfache Funktion erstellen, die Text in einen Textbereich an der Cursorposition des Benutzers einfügt. Es muss eine saubere Funktion sein. Nur die Grundlagen. Ich kann den Rest herausfinden. 

84
JoshMWilliams
function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    //MOZILLA and others
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
            + myValue
            + myField.value.substring(endPos, myField.value.length);
    } else {
        myField.value += myValue;
    }
}
83
Raab

Dieses Snippet könnte Ihnen in ein paar Zeilen von jQuery 1.9+ helfen: http://jsfiddle.net/4MBUG/2/

$('input[type=button]').on('click', function() {
    var cursorPos = $('#text').prop('selectionStart');
    var v = $('#text').val();
    var textBefore = v.substring(0,  cursorPos);
    var textAfter  = v.substring(cursorPos, v.length);

    $('#text').val(textBefore + $(this).val() + textAfter);
});
63
Adriano Alves

Für richtiges Javascript

HTMLTextAreaElement.prototype.insertAtCaret = function (text) {
  text = text || '';
  if (document.selection) {
    // IE
    this.focus();
    var sel = document.selection.createRange();
    sel.text = text;
  } else if (this.selectionStart || this.selectionStart === 0) {
    // Others
    var startPos = this.selectionStart;
    var endPos = this.selectionEnd;
    this.value = this.value.substring(0, startPos) +
      text +
      this.value.substring(endPos, this.value.length);
    this.selectionStart = startPos + text.length;
    this.selectionEnd = startPos + text.length;
  } else {
    this.value += text;
  }
};
25
Erik Aigner

Eine reine JS-Modifikation der Antwort von Erik Pukinskis:

function typeInTextarea(el, newText) {
  var start = el.selectionStart
  var end = el.selectionEnd
  var text = el.value
  var before = text.substring(0, start)
  var after  = text.substring(end, text.length)
  el.value = (before + newText + after)
  el.selectionStart = el.selectionEnd = start + newText.length
  el.focus()
}

Nur in Chrome 47 getestet.

Wenn Sie den Wert des aktuell ausgewählten Textes ändern möchten, während Sie dasselbe Feld eingeben (für eine automatische Vervollständigung oder einen ähnlichen Effekt), übergeben Sie document.activeElement als ersten Parameter.

Dies ist nicht der eleganteste Weg, aber es ist ziemlich einfach.

11
Jayant Bhawal

Die Antwort von Rab funktioniert großartig, aber nicht für Microsoft Edge. Daher habe ich auch eine kleine Anpassung für Edge hinzugefügt: 

https://jsfiddle.net/et9borp4/

function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    // Microsoft Edge
    else if(window.navigator.userAgent.indexOf("Edge") > -1) {
      var startPos = myField.selectionStart; 
      var endPos = myField.selectionEnd; 

      myField.value = myField.value.substring(0, startPos)+ myValue 
             + myField.value.substring(endPos, myField.value.length); 

      var pos = startPos + myValue.length;
      myField.focus();
      myField.setSelectionRange(pos, pos);
    }
    //MOZILLA and others
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
            + myValue
            + myField.value.substring(endPos, myField.value.length);
    } else {
        myField.value += myValue;
    }
}
8
Snorvarg

Ich mag einfaches Javascript und normalerweise habe ich jQuery. Hier ist, worauf ich gekommen bin, basierend auf mparkuk's :

function typeInTextarea(el, newText) {
  var start = el.prop("selectionStart")
  var end = el.prop("selectionEnd")
  var text = el.val()
  var before = text.substring(0, start)
  var after  = text.substring(end, text.length)
  el.val(before + newText + after)
  el[0].selectionStart = el[0].selectionEnd = start + newText.length
  el.focus()
}

$("button").on("click", function() {
  typeInTextarea($("textarea"), "some text")
  return false
})

Hier ist eine Demo: http://codepen.io/erikpukinskis/pen/EjaaMY?editors=101

7
Erik Pukinskis

Wenn der Benutzer die Eingabe nach dem Einfügen von Text nicht berührt, wird das Ereignis 'input' niemals ausgelöst, und das value-Attribut spiegelt die Änderung nicht wider. Daher ist es wichtig, das Eingabeereignis nach dem programmgesteuerten Einfügen von Text auszulösen. Das Feld zu fokussieren reicht nicht aus.

Das Folgende ist eine Kopie von Snorvargs Antwort mit einem Eingangstrigger am Ende:

function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    // Microsoft Edge
    else if(window.navigator.userAgent.indexOf("Edge") > -1) {
      var startPos = myField.selectionStart; 
      var endPos = myField.selectionEnd; 

      myField.value = myField.value.substring(0, startPos)+ myValue 
             + myField.value.substring(endPos, myField.value.length); 

      var pos = startPos + myValue.length;
      myField.focus();
      myField.setSelectionRange(pos, pos);
    }
    //MOZILLA and others
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
            + myValue
            + myField.value.substring(endPos, myField.value.length);
    } else {
        myField.value += myValue;
    }
    triggerEvent(myField,'input');
}

function triggerEvent(el, type){
  if ('createEvent' in document) {
    // modern browsers, IE9+
    var e = document.createEvent('HTMLEvents');
    e.initEvent(type, false, true);
    el.dispatchEvent(e);
  } else {
    // IE 8
    var e = document.createEventObject();
    e.eventType = type;
    el.fireEvent('on'+e.eventType, e);
  }
}

Kredit an plainjs.com für die triggerEvent-Funktion

Mehr zum Oninput-Event unter w3schools.com

Ich habe dies entdeckt, als ich einen Emoji-Picker für einen Chat erstellt habe. Wenn der Benutzer nur ein paar Emojis auswählt und auf die Schaltfläche "Senden" klickt, wird das Eingabefeld vom Benutzer niemals berührt. Bei der Überprüfung des value-Attributs war es immer leer, obwohl die eingefügten Emoji-Unicodes im Eingabefeld sichtbar waren. Es stellt sich heraus, dass, wenn der Benutzer das Feld nicht berührt, das Ereignis 'input' nie ausgelöst wurde und die Lösung es so auslösen sollte. Es hat eine Weile gedauert, bis ich das herausgefunden habe ... hoffe, es wird jemandem etwas Zeit sparen.

4
Jette

Eine einfache Lösung, die auf Firefox, Chrome, Opera, Safari und Edge funktioniert, aber wahrscheinlich nicht auf alten IE Browsern.

  var target = document.getElementByID("mytextarea_id")

  if (target.setRangeText) {
     //if setRangeText function is supported by current browser
     target.setRangeText(data)
  } else {
    target.focus()
    document.execCommand('insertText', false /*no UI*/, data);
  }
}

Mit der Funktion setRangeText können Sie die aktuelle Auswahl durch den angegebenen Text ersetzen. Wenn keine Auswahl vorhanden ist, fügen Sie den Text an der Cursorposition ein. Es wird nur von Firefox unterstützt, soweit ich weiß.

Für andere Browser gibt es den Befehl "insertText", der sich nur auf das derzeit fokussierte HTML-Element auswirkt und dasselbe Verhalten hat wie setRangeText

Teilweise inspiriert von diesem Artikel

2
Ramast
 /**
 * Usage "foo baz".insertInside(4, 0, "bar ") ==> "foo bar baz"
 */
String.prototype.insertInside = function(start, delCount, newSubStr) {
    return this.slice(0, start) + newSubStr + this.slice(start + Math.abs(delCount));
};


 $('textarea').bind("keydown keypress", function (event) {
   var val = $(this).val();
   var indexOf = $(this).prop('selectionStart');
   if(event.which === 13) {
       val = val.insertInside(indexOf, 0,  "<br>\n");
       $(this).val(val);
       $(this).focus();
    }
})
1
zaarour

Hat es in getElementById (myField) geändert

 function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        document.getElementById(myField).focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    //MOZILLA and others
    else if (document.getElementById(myField).selectionStart || document.getElementById(myField).selectionStart == '0') {
        var startPos = document.getElementById(myField).selectionStart;
        var endPos = document.getElementById(myField).selectionEnd;
        document.getElementById(myField).value = document.getElementById(myField).value.substring(0, startPos)
            + myValue
            + document.getElementById(myField).value.substring(endPos, document.getElementById(myField).value.length);
    } else {
        document.getElementById(myField).value += myValue;
    }
}
0
tekagami

Buchung der geänderten Funktion zur eigenen Referenz. In diesem Beispiel wird ein ausgewähltes Element aus dem <select>-Objekt eingefügt und der Cursor wird zwischen den Tags eingefügt:

//Inserts a choicebox selected element into target by id
function insertTag(choicebox,id) {
    var ta=document.getElementById(id)
    ta.focus()
    var ss=ta.selectionStart
    var se=ta.selectionEnd
    ta.value=ta.value.substring(0,ss)+'<'+choicebox.value+'>'+'</'+choicebox.value+'>'+ta.value.substring(se,ta.value.length)
    ta.setSelectionRange(ss+choicebox.value.length+2,ss+choicebox.value.length+2)
}
0
Alexiy