Text in Textfeld an Cursorposition einfügen (Javascript)

Ich würde gerne eine einfache Funktion zum einfügen von text in einen text-Bereich, an der der Benutzer die cursor-position. Es muss eine saubere Funktion. Nur die Grundlagen. Ich kann herausfinden, die Ruhe.

InformationsquelleAutor der Frage JoshMWilliams | 2012-06-18

javascript textarea

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

InformationsquelleAutor der Antwort Rab

Dieses snippet könnte Ihnen helfen, es in ein paar Zeilen jQuery 1.9+: 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);
});

InformationsquelleAutor der Antwort Adriano Alves

Gründen der ordnungsgemäßen 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;
  }
};

InformationsquelleAutor der Antwort Erik Aigner

7

Einer reinen JS-änderungen von Erik Pukinskis' Antwort:
```
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()
}
```
Getestet in Chrome 47.

Wenn Sie möchten, ändern Sie den Wert des aktuell ausgewählten text, während Sie mit der Eingabe in das gleiche Feld (für eine AutoVervollständigen-oder ähnlicher Effekt), pass document.activeElement als ersten parameter.

Es ist nicht der eleganteste Weg, dies zu tun, aber es ist ziemlich einfach.

InformationsquelleAutor der Antwort Jayant Bhawal

Ich mag einfache javascript, und normalerweise habe ich jQuery um. Hier ist, was ich kam mit, auf der Grundlage mparkuk ist:

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

InformationsquelleAutor der Antwort Erik Pukinskis

Rab Antwort funktioniert Super, aber nicht für Microsoft Rand, so dass ich fügte eine kleine Anpassung für den Rand als auch:

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

InformationsquelleAutor der Antwort Snorvarg

Wenn der Benutzer nicht berühren Sie die Eingabe nach text eingefügt wird, der 'input' - Ereignis wird nie ausgelöst, und das value-Attribut wird nicht die änderung wider. Deshalb ist es wichtig, trigger-input-event nach programmgesteuert einfügen von text. Die Fokussierung des Feldes ist nicht genug.

Folgende ist eine Kopie des Snorvarg Antwort mit einem trigger-Eingang trigger-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 plainjs.com für die triggerEvent Funktion

Mehr über das oninput-event bei w3schools.com

Entdeckte ich diese beim erstellen eines emoji-picker für einen chat. Wenn die Benutzer wählen Sie einfach ein paar emojis und drücken Sie die "senden" - Taste, das Eingabefeld wird nicht berührt durch den Benutzer. Bei der überprüfung der Wert-Attribut es wurde immer leerer, obwohl die emoji eingefügt unicodes wurde sichtbar in das Eingabefeld ein. Stellt sich heraus, dass, wenn der Benutzer nicht berühren Sie das Feld der 'input' - Ereignis nie ausgelöst und die Lösung war, um es zu lösen, wie diese. Es dauerte eine Weile, bis dieses heraus... hoffe, es wird jemand retten einige Zeit.

InformationsquelleAutor der Antwort Jette

Geändert, um getElementById(myField)

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

InformationsquelleAutor der Antwort tekagami

Posting geändert-Funktion für eigene Referenz. Dieses Beispiel fügt ein ausgewähltes Element aus <select> - Objekt und setzt den Cursor zwischen die tags:

//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)
}

InformationsquelleAutor der Antwort Alexiy

 /**
 * 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();
    }
})

InformationsquelleAutor der Antwort zaarour

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.