Text in Textfeld an Cursorposition einfügen (Javascript)

Question

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

Answer 1

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

Answer 2

Dieser Ausschnitt kann man mit ihm in ein paar Zeilen von jQuery helfen 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); 
}); 

Answer 3

es zu getElementById (myField) Changed

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

Answer 4

Aus Gründen der ordnungsgemäßen Javascript

Answer 5

Ich mag einfaches Javascript, und ich habe normalerweise jQuery herum. Hier ist, was ich kam mit der Basis aus 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

Answer 6

Eine reine JS Modifikation von Erik 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() 
} 

in Chrome Getestet 47 nur.

Wenn Sie den Wert des aktuell ausgewählten Text ändern möchten, während Sie in dem gleichen Feld (für einen der automatischen Vervollständigung oder ähnlicher Wirkung) sind die Eingabe, übergeben document.activeElement als ersten Parameter.

Es ist nicht die eleganteste Art, dies zu tun, aber es ist ziemlich einfach.

Answer 7

Geänderte Funktion für eigene Referenz buchen. In diesem Beispiel wird ein ausgewähltes Element aus <select> Objekt und setzt die Einfügemarke zwischen den 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) 
} 

Answer 8

Rab Antwort funktioniert gut, aber nicht für Microsoft Edge, so habe ich eine kleine Anpassung Edge 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; 
    } 
} 

Answer 9

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

Answer 10

Wenn der Benutzer berührt nicht die Eingabe nach Text eingefügt wird, das ‚Input‘ Ereignis nie ausgelöst wird, und der Wert attribu te wird die Änderung nicht wiedergeben. Daher ist es wichtig, das Eingabeereignis nach dem programmatischen Einfügen von Text auszulösen. Das Feld zu fokussieren ist nicht genug.

Das Folgende ist eine Kopie von Snorvarg's answer mit einer Trigger-Eingang 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); 
    } 
} 

Credit plainjs.com für die trigger Funktion

Mehr zu dem oninput Ereignisse bei w3schools.com

ich entdecken Dies während der Erstellung eines Emoji-Picker für einen Chat.Wenn der Benutzer nur ein paar Emojis auswählt und den "Senden" -Knopf drückt, wird das Eingabefeld niemals vom Benutzer berührt. Beim Überprüfen des Wertattributs war es immer leer, obwohl die eingefügten Emoji-Unicodes im Eingabefeld sichtbar waren. Stellt sich heraus, dass das Ereignis 'input' nie ausgelöst wurde, wenn der Benutzer das Feld nicht berührt, sollte die Lösung so ausgelöst werden. Es hat eine ganze Weile gedauert, bis ich das herausgefunden habe ... ich hoffe, es wird jemandem Zeit sparen.