Мне интересно, как я могу вставлять текст в текстовую область, используя jquery, после щелчка привязанного тега.
Я не хочу заменять текст уже в textarea, я хочу добавить новый текст в textarea.
Вставить текст в textarea с помощью jQuery
Ответ 1
Из того, что у вас есть в комментариях Джейсона, попробуйте:
$('a').click(function() //this will apply to all anchor tags
{
$('#area').val('foobar'); //this puts the textarea for the id labeled 'area'
})
Изменить - Чтобы добавить текст в текст ниже
$('a').click(function() //this will apply to all anchor tags
{
$('#area').val($('#area').val()+'foobar');
})
Ответ 2
Мне нравится расширение функции jQuery. Однако это относится к объекту jQuery, а не к объекту DOM. Поэтому я немного изменил его, чтобы сделать его еще лучше (можно обновить сразу несколько текстовых полей/текстовых полей).
jQuery.fn.extend({
insertAtCaret: function(myValue){
return this.each(function(i) {
if (document.selection) {
//For browsers like Internet Explorer
this.focus();
var sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
else if (this.selectionStart || this.selectionStart == '0') {
//For browsers like Firefox and Webkit based
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
}
});
Это работает очень хорошо. Вы можете вставлять сразу несколько мест, например:
$('#element1, #element2, #element3, .class-of-elements').insertAtCaret('text');
Ответ 3
Я использую эту функцию в своем коде:
$.fn.extend({
insertAtCaret: function(myValue) {
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
else if (this.selectionStart || this.selectionStart == '0') {
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
}
})
Это не 100% мое, я где-то искал его, а затем настроил для своего приложения.
Использование: $('#element').insertAtCaret('text');
Ответ 4
Я знаю, что это старый вопрос, но для людей, которые ищут это решение, стоит отметить, что вы не должны использовать append() для добавления контента в текстовое поле. метод append() нацеливает innerHTML не значение текстового поля. Содержимое может отображаться в текстовом поле, но оно не будет добавлено к значению элемента.
Как указано выше, используя:
$('#textarea').val($('#textarea').val()+'new content');
будет работать нормально.
Ответ 5
Хей это модифицированная версия, которая работает нормально в FF @least для меня и вставляет в положение каретки
$.fn.extend({
insertAtCaret: function(myValue){
var obj;
if( typeof this[0].name !='undefined' ) obj = this[0];
else obj = this;
if ($.browser.msie) {
obj.focus();
sel = document.selection.createRange();
sel.text = myValue;
obj.focus();
}
else if ($.browser.mozilla || $.browser.webkit) {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var scrollTop = obj.scrollTop;
obj.value = obj.value.substring(0, startPos)+myValue+obj.value.substring(endPos,obj.value.length);
obj.focus();
obj.selectionStart = startPos + myValue.length;
obj.selectionEnd = startPos + myValue.length;
obj.scrollTop = scrollTop;
} else {
obj.value += myValue;
obj.focus();
}
}
})
Ответ 6
это позволяет вам "вставлять" текст в текстовое поле, впрыскивать означает: добавляет текст, в котором находится курсор.
function inyectarTexto(elemento,valor){
var elemento_dom=document.getElementsByName(elemento)[0];
if(document.selection){
elemento_dom.focus();
sel=document.selection.createRange();
sel.text=valor;
return;
}if(elemento_dom.selectionStart||elemento_dom.selectionStart=="0"){
var t_start=elemento_dom.selectionStart;
var t_end=elemento_dom.selectionEnd;
var val_start=elemento_dom.value.substring(0,t_start);
var val_end=elemento_dom.value.substring(t_end,elemento_dom.value.length);
elemento_dom.value=val_start+valor+val_end;
}else{
elemento_dom.value+=valor;
}
}
И вы можете использовать его следующим образом:
<a href="javascript:void(0);" onclick="inyectarTexto('nametField','hello world');" >Say hello world to text</a>
Смешные и имеющие большее значение, когда у нас есть функция "Вставить тег в текст".
работает во всех браузерах.
Ответ 7
Вы пробовали:
$("#yourAnchor").click(function () {
$("#yourTextarea").val("your text");
});
не уверен в автовысоте.
ИЗМЕНИТЬ
Чтобы добавить:
$("#yourAnchor").click(function () {
$("#yourTextarea").append("your text to append");
});
Ответ 8
То, о чем вы просите, должно быть достаточно простым в jQuery -
$(function() {
$('#myAnchorId').click(function() {
var areaValue = $('#area').val();
$('#area').val(areaValue + 'Whatever you want to enter');
});
});
Лучший способ, с помощью которого я могу выделить выделенный текст, - это обернуть его в промежутке с классом CSS с background-color, установленным на цвет по вашему выбору. В следующей вставке вы можете удалить класс из любых существующих интервалов (или удалить полосы).
Тем не менее, на рынке доступно множество бесплатных редакторов HTML/Rich Text WYSIWYG, я уверен, что каждый будет соответствовать вашим потребностям
- TinyMCE - редактор JavaScript WYSIWYG
- Rich Text Editor - Библиотека YUI
- 10 jQuery и не-jQuery JavaScript Rich Text Editors
Ответ 9
Вот быстрое решение, которое работает в jQuery 1.9 +:
a) Получить позицию каретки:
function getCaret(el) {
if (el.prop("selectionStart")) {
return el.prop("selectionStart");
} else if (document.selection) {
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
return rc.text.length;
}
return 0;
};
b) Добавить текст в позицию каретки:
function appendAtCaret($target, caret, $value) {
var value = $target.val();
if (caret != value.length) {
var startPos = $target.prop("selectionStart");
var scrollTop = $target.scrollTop;
$target.val(value.substring(0, caret) + ' ' + $value + ' ' + value.substring(caret, value.length));
$target.prop("selectionStart", startPos + $value.length);
$target.prop("selectionEnd", startPos + $value.length);
$target.scrollTop = scrollTop;
} else if (caret == 0)
{
$target.val($value + ' ' + value);
} else {
$target.val(value + ' ' + $value);
}
};
c) Пример
$('textarea').each(function() {
var $this = $(this);
$this.click(function() {
//get caret position
var caret = getCaret($this);
//append some text
appendAtCaret($this, caret, 'Some text');
});
});
Ответ 10
Он работает хорошо для меня в Chrome 20.0.11
var startPos = this[0].selectionStart;
var endPos = this[0].selectionEnd;
var scrollTop = this.scrollTop;
this[0].value = this[0].value.substring(0, startPos) + myVal + this[0].value.substring(endPos, this[0].value.length);
this.focus();
this.selectionStart = startPos + myVal.length;
this.selectionEnd = startPos + myVal.length;
this.scrollTop = scrollTop;
Ответ 11
Если вы хотите добавить контент в текстовое поле, не заменяя его, вы можете попробовать следующее
$('textarea').append('Whatever need to be added');
В соответствии с вашим сценарием это будет
$('a').click(function()
{
$('textarea').append($('#area').val());
})
Ответ 12
Я использовал это, и он отлично работает:)
$("#textarea").html("Put here your content");
Remi
Ответ 13
Я думаю, это было бы лучше
$(function() {
$('#myAnchorId').click(function() {
var areaValue = $('#area').val();
$('#area').val(areaValue + 'Whatever you want to enter');
});
});
Ответ 14
Другое решение описано здесь здесь, если некоторые другие скрипты не работают в вашем случае.
Ответ 15
Простое решение: (Предположение: вы хотите, чтобы все, что вы введете в текстовое поле , чтобы добавить к тому, что уже существует в textarea)
В событии onClick a > , напишите пользовательскую функцию, которая делает следующее:
function textType(){
var **str1**=$("#textId1").val();
var **str2**=$("#textId2").val();
$("#textId1").val(str1+str2);
}
(где идентификаторы, textId1 - для o/p textArea textId2 - для i/p текстового поля)
Ответ 16
Это похоже на ответ, заданный @panchicore с исправленной незначительной ошибкой.
function insertText(element, value)
{
var element_dom = document.getElementsByName(element)[0];
if (document.selection)
{
element_dom.focus();
sel = document.selection.createRange();
sel.text = value;
return;
}
if (element_dom.selectionStart || element_dom.selectionStart == "0")
{
var t_start = element_dom.selectionStart;
var t_end = element_dom.selectionEnd;
var val_start = element_dom.value.substring(value, t_start);
var val_end = element_dom.value.substring(t_end, element_dom.value.length);
element_dom.value = val_start + value + val_end;
}
else
{
element_dom.value += value;
}
}
Ответ 17
$.fn.extend({
insertAtCaret: function(myValue) {
var elemSelected = window.getSelection();
if(elemSelected) {
var startPos = elemSelected.getRangeAt(0).startOffset;
var endPos = elemSelected.getRangeAt(0).endOffset;
this.val(this.val().substring(0, startPos)+myValue+this.val().substring(endPos,this.val().length));
} else {
this.val(this.val()+ myValue) ;
}
}
});