如何在当前光标位置将文本插入到文本区？

我想创建一个简单的函数，将文本添加到用户光标位置的文本区域。它需要一个干净的功能。只是些基础知识。剩下的我能搞定。

172505 次浏览
小开

使用 selectionStart/selectionEnd 输入元素的属性(同样适用于 <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;
}
}
小开

这个代码片段可以在 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);
});
小开

改成 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;
}
}
小开

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

我喜欢简单的 Javascript，我通常都有 JQuery:

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

小开

新答案:

Https://developer.mozilla.org/en-us/docs/web/api/htmlinputelement/setrangetext

不过我不确定浏览器是否支持这个功能。

在 Chrome81中测试。

function typeInTextarea(newText, el = document.activeElement) {
const [start, end] = [el.selectionStart, el.selectionEnd];
el.setRangeText(newText, start, end, 'select');
}


document.getElementById("input").onkeydown = e => {
if (e.key === "Enter") typeInTextarea("lol");
}
<input id="input" />
<br/><br/>
<div>Press Enter to insert "lol" at caret.</div>
<div>It'll replace a selection with the given text.</div>

老答案:

埃里克 · 普金斯基(Erik Pukinski)回答的一个纯粹的 JS 修正:

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


document.getElementById("input").onkeydown = e => {
if (e.key === "Enter") typeInTextarea("lol");
}
<input id="input" />
<br/><br/>
<div>Press Enter to insert "lol" at caret.</div>

在 Chrome 47,81和 Firefox 76中测试。

如果要在输入相同字段时更改当前选定文本的值(以获得自动完成或类似的效果) ，请将 document.activeElement作为第一个参数传递。

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

示例用法:

typeInTextarea('hello');
typeInTextarea('haha', document.getElementById('some-id'));
小开

张贴修改后的函数供自己参考。此示例从 <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)
}
小开

Rab 的回答很好用，但是对于微软的 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;
}
}
小开 
/**
* 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();
}
});
小开

如果用户在插入文本后没有触摸输入，那么‘ input’事件将永远不会被触发，value 属性也不会反映更改。因此，在以编程方式插入文本之后触发输入事件非常重要。仅仅聚焦领域是不够的。

下面是 斯诺瓦格的回答的一个副本，末尾有一个输入触发器:

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

触发事件函数归功于 Plainjs.com

关于 W3school. com的 oninput 事件的更多信息

我在创建一个聊天用的表情符号选择器时发现了这一点。如果用户只是选择了一些表情符号，并点击“发送”按钮，输入字段从来没有被用户触摸。当检查 value 属性时，它始终是空的，即使插入的表情符号 Unicode 在输入字段中是可见的。结果表明，如果用户不触摸该字段的“输入”事件永远不会触发，解决方案是像这样触发它。我花了很长时间才弄明白这个问题，希望能节省一些人的时间。

小开

一个简单的解决方案，可以在 Firefox，chrome，Opera，safari 和 edge 上运行，但可能不适用于旧的 IE 浏览器。

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

setRangeText函数允许您用提供的文本替换当前选定内容，或者如果没有选定内容，则在光标位置插入文本。据我所知，只有 Firefox 支持它。

对于其他浏览器，有一个“ insert tText”命令，它只影响当前聚焦的 html 元素，并具有与 setRangeText相同的行为

部分灵感来自 文章

小开 

function insertAtCaret(text) {
const textarea = document.querySelector('textarea')
textarea.setRangeText(
text,
textarea.selectionStart,
textarea.selectionEnd,
'end'
)
}


setInterval(() => insertAtCaret('Hello'), 3000)
<textarea cols="60">Stack Overflow Stack Exchange Starbucks Coffee</textarea>

小开

下面的代码是 DmitriyKubyshkin 对包 https://github.com/grassator/insert-text-at-cursor的 TypeScript 改编。


/**
* Inserts the given text at the cursor. If the element contains a selection, the selection
* will be replaced by the text.
*/
export function insertText(input: HTMLTextAreaElement | HTMLInputElement, text: string) {
// Most of the used APIs only work with the field selected
input.focus();


// IE 8-10
if ((document as any).selection) {
const ieRange = (document as any).selection.createRange();
ieRange.text = text;


// Move cursor after the inserted text
ieRange.collapse(false /* to the end */);
ieRange.select();


return;
}


// Webkit + Edge
const isSuccess = document.execCommand("insertText", false, text);
if (!isSuccess) {
const start = input.selectionStart;
const end = input.selectionEnd;
// Firefox (non-standard method)
if (typeof (input as any).setRangeText === "function") {
(input as any).setRangeText(text);
} else {
if (canManipulateViaTextNodes(input)) {
const textNode = document.createTextNode(text);
let node = input.firstChild;


// If textarea is empty, just insert the text
if (!node) {
input.appendChild(textNode);
} else {
// Otherwise we need to find a nodes for start and end
let offset = 0;
let startNode = null;
let endNode = null;


// To make a change we just need a Range, not a Selection
const range = document.createRange();


while (node && (startNode === null || endNode === null)) {
const nodeLength = node.nodeValue.length;


// if start of the selection falls into current node
if (start >= offset && start <= offset + nodeLength) {
range.setStart((startNode = node), start - offset);
}


// if end of the selection falls into current node
if (end >= offset && end <= offset + nodeLength) {
range.setEnd((endNode = node), end - offset);
}


offset += nodeLength;
node = node.nextSibling;
}


// If there is some text selected, remove it as we should replace it
if (start !== end) {
range.deleteContents();
}


// Finally insert a new node. The browser will automatically
// split start and end nodes into two if necessary
range.insertNode(textNode);
}
} else {
// For the text input the only way is to replace the whole value :(
const value = input.value;
input.value = value.slice(0, start) + text + value.slice(end);
}
}


// Correct the cursor position to be at the end of the insertion
input.setSelectionRange(start + text.length, start + text.length);


// Notify any possible listeners of the change
const e = document.createEvent("UIEvent");
e.initEvent("input", true, false);
input.dispatchEvent(e);
}
}


function canManipulateViaTextNodes(input: HTMLTextAreaElement | HTMLInputElement) {
if (input.nodeName !== "TEXTAREA") {
return false;
}
let browserSupportsTextareaTextNodes;
if (typeof browserSupportsTextareaTextNodes === "undefined") {
const textarea = document.createElement("textarea");
textarea.value = "1";
browserSupportsTextareaTextNodes = !!textarea.firstChild;
}
return browserSupportsTextareaTextNodes;
}
小开

扩展阿德里亚诺的回答，我们也可以考虑光标结束，这将使“替换文本”的工作

$('input[type=button]').on('click', function() {
var cursorStart = $('#text').prop('selectionStart');
var cursorEnd = $('#text').prop('selectionEnd');
var v = $('#text').val();
var textBefore = v.substring(0,cursorStart);
var textAfter  = v.substring(cursorEnd);
$('#text').val(textBefore + $(this).val() + textAfter);
});

提交答案