在光标位置插入文本到textarea（Javascript）

我想创build一个简单的函数，将文本添加到用户光标位置的文本区域。 它需要是一个干净的function。 只是基础知识。 我可以找出其余的。

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

这段代码可以帮助你几行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); }); 

Answer 3

为了正确的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; } }; 

Answer 4

我喜欢简单的JavaScript，我通常有jQuery左右。 这是我想出来的，基于mparkuk的 ：

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

这是一个演示： http : //codepen.io/erikpukinskis/pen/EjaaMY? editors= 101

Answer 5

Erik的答案的一个纯粹的JS修改：

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

仅在Chrome 47testing。

如果要在input相同字段（对于自动完成或类似效果）中更改当前选定文本的值，请将document.activeElement作为第一个parameter passing。

这不是最优雅的方式，但它很简单。

Answer 6

Rab的答案效果很好，但不适用于Microsoft Edge，所以我还为Edge添加了一个小改动：

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 7

将其更改为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; } } 

Answer 8

发布修改后的函数以供自己参考。 这个例子从<select>对象中插入一个选定的项目，并在标签之间插入：

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