Я хотел бы создать простую функцию, которая добавляет текст в текстовую область в позиции курсора пользователя. Это должна быть чистая функция. Просто основы. Я могу выяснить остальное.
Вставка текста в текстовое поле в позиции курсора (Javascript)
Ответ 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;
}
}
Ответ 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);
});
Ответ 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;
}
};
Ответ 4
Чистая 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()
}
Tested in Chrome 47 only.
Если вы хотите изменить значение выделенного в данный момент текста во время ввода в том же поле (для автозаполнения или аналогичного эффекта), передайте document.activeElement
в качестве первого параметра.
Это не самый элегантный способ сделать это, но это довольно просто.
Ответ 5
Ответ 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;
}
}
Ответ 6
Мне нравится простой javascript, и у меня обычно есть jQuery. Вот что я придумал, основываясь на 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
})
Вот демо: http://codepen.io/erikpukinskis/pen/EjaaMY?editors=101
Ответ 7
Если пользователь не касается ввода после вставки текста, событие "вход" никогда не запускается, и атрибут value не отражает изменения. Поэтому очень важно инициировать входное событие после программной вставки текста. Фокусировка поля недостаточно.
Ниже приведен экземпляр ответа Snorvarg с триггером ввода в конце:
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 для функции triggerEvent
Подробнее о событии oninput в w3schools.com
Я обнаружил это, создавая emoji-picker для чата. Если пользователь просто выбирает несколько эмоций и нажимает кнопку "отправить", поле ввода никогда не затрагивается пользователем. При проверке атрибута value он всегда был пустым, хотя в поле ввода были видны вставленные unicodes emoji. Оказывается, если пользователь не коснется поля, событие "вход" никогда не срабатывало, и решение должно было вызвать его таким образом. Понадобилось довольно долгое время, чтобы понять это... надеюсь, что это сэкономит какое-то время.
Ответ 8
Простое решение, которое работает на 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.
Для других браузеров есть команда "insertText", которая влияет только на элемент html, который в настоящее время находится в фокусе, и имеет то же поведение, что и setRangeText
Отчасти вдохновлено этой статьей
Ответ 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();
}
})
Ответ 10
Изменен для 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;
}
}
Ответ 11
Публикация измененной функции для собственной ссылки. В этом примере вставляется выделенный элемент из объекта <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)
}
Ответ 12
function insertAtCaret(text) {
const textarea = document.querySelector('textarea')
textarea.setRangeText(
text,
textarea.selectionStart,
textarea.selectionEnd,
'end'
)
}
setInterval(() => insertAtCaret('Hello'), 5000)
<textarea>Qaru Stack Exchange Starbucks Coffee</textarea>