Вставить текст в textarea с помощью jQuery

Мне интересно, как я могу вставлять текст в текстовую область, используя jquery, после щелчка привязанного тега.

Я не хочу заменять текст уже в textarea, я хочу добавить новый текст в textarea.

Из того, что у вас есть в комментариях Джейсона, попробуйте:

$('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'); }) 

Мне нравится расширение функции 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'); 

Я использую эту функцию в своем коде:

 $.fn.extend({ insertAtCaret: function(myValue) { this.each(function() { if (document.selection) { this.focus(); var 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(); } }); return this; } }); 
 input{width:100px} label{display:block;margin:10px 0} 
     

Я знаю, что это старый вопрос, но для людей, которые ищут это решение, стоит отметить, что вы не должны использовать append () для добавления контента в текстовое поле. метод append () нацелен на innerHTML, а не на значение textarea. Содержимое может отображаться в текстовом поле, но оно не будет добавлено к значению формы элемента.

Как указано выше, используя:

 $('#textarea').val($('#textarea').val()+'new content'); 

будет работать нормально.

это позволяет вам «вводить» текст в текстовое поле, впрыскивать означает: добавляет текст, в котором находится курсор.

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

И вы можете использовать его так:

 Say hello world to text 

Смешные и имеющие больший смысл, когда у нас есть функция «Вставить тег в текст».

работает во всех браузерах.

Hej – это модифицированная версия, которая работает нормально в FF @least для меня и вставляет в положение «Carets»

  $.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(); } } }) 

ты пробовал:

 $("#yourAnchor").click(function () { $("#yourTextarea").val("your text"); }); 

не уверен в том, что касается автофокусировки.

EDIT :

Чтобы добавить:

 $("#yourAnchor").click(function () { $("#yourTextarea").append("your text to append"); }); 

То, о чем вы просите, должно быть достаточно простым в jQuery-

 $(function() { $('#myAnchorId').click(function() { var areaValue = $('#area').val(); $('#area').val(areaValue + 'Whatever you want to enter'); }); }); 

Лучший способ, которым я могу думать о том, чтобы выделить вставленный текст, – это обернуть его в промежутке с classом CSS с background-color заданным по вашему выбору. В следующей вставке вы можете удалить class из любых существующих интервалов (или удалить полосы).

Тем не менее, на рынке доступно множество бесплатных редакторов HTML / Rich Text WYSIWYG, я уверен, что каждый будет соответствовать вашим потребностям

  • TinyMCE – редактор JavaScript WYSIWYG
  • Rich Text Editor – Библиотека YUI
  • 10 jQuery и не-jQuery JavaScript Rich Text Editors

Вот быстрое решение, которое работает в 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'); }); }); 

Он работает хорошо для меня в 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; 

Если вы хотите добавить контент в текстовое поле, не заменяя его, вы можете попробовать следующее:

 $('textarea').append('Whatever need to be added'); 

Согласно вашему сценарию, это будет

 $('a').click(function() { $('textarea').append($('#area').val()); }) 

Я использовал это, и он отлично работает 🙂

 $("#textarea").html("Put here your content"); 

Remi

Я думаю, это было бы лучше

 $(function() { $('#myAnchorId').click(function() { var areaValue = $('#area').val(); $('#area').val(areaValue + 'Whatever you want to enter'); }); }); 

Другое решение также описано здесь, если некоторые другие скрипты не работают в вашем случае.

Это похоже на ответ, заданный @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; } } 

Простым решением будет: ( Предположение : вы хотите, чтобы все, что вы вводите в текстовое поле, добавлялось к тому, что уже есть в текстовом поле )

В событии onClick тега напишите пользовательскую функцию, которая выполняет следующие действия:

 function textType(){ var **str1**=$("#textId1").val(); var **str2**=$("#textId2").val(); $("#textId1").val(str1+str2); } 

(где идентификаторы, textId1 – для o / p textArea textId2-for i / p textbox)

 $.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) ; } } }); 
  • Формат A TimeSpan с годами
  • Форматирование DATE в oracle
  • iPhone: как получить символ местной валюты (т. е. «$» отменить «AU $»)
  • Лучший способ отображения десятичной дроби без конечных нhive
  • Показывать число до двух знаков после запятой
  • Двойное десятичное форматирование в Java
  • JPanel Padding в Java
  • Как отобразить вывод данных float с 2 десятичными знаками в Java?
  • что такое идентификаторы формата scanf ("% * s") и scanf ("% * d")?
  • Правильный формат валюты, когда не отображается национальная валюта культуры
  • Преобразование даты / времени для данного часового пояса - java
  • Давайте будем гением компьютера.