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

151

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

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

Оливер Стубли
источник
1
Если это решение - предпочел бы встроить его в себя, однако. Его для личного блога я делаю для друга, так что все, что подойдет для этого.
Оливер Стабли
поэтому вы хотите выделить текст, и какой бы из них ни был выбран, используйте jquery для заполнения текстовой области, если да, откуда этот текст поступает, вводится вручную или из специального тега?
Стампер
TStamper, я хочу иметь возможность нажимать кнопку и в зависимости от того, что нажимается, вставлять текст в текстовое поле.
Оливер Стабли
так что если вы нажмете кнопку с надписью "жирный", вы хотите жирный текст в текстовой области?
TStamper
Не жирный текст, а жирные теги (возможно, нестандартные, а не html)
Оливер Стубли,

Ответы:

125

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

$('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'); 
})
TStamper
источник
проверьте мой ответ, чтобы найти более простой способ добавить текст
Jason
8
@ Jason - извините, не правда, добавление ожидает html-данные, начинающиеся с html-элемента, например: <p
TStamper
Как насчет того, если результат приходит со страницы PHP и обрабатывается jQuery? (между ними данные передаются с помощью Json)
Абу Рэйн
186

Мне нравится расширение функции jQuery. Однако this ссылается на объект 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
В ответе есть трейлинг}), поэтому сначала я подумал, что решение не работает, но после исправления оно отлично работает в IE7 и FF3.5. Вы можете вставить фрагмент текста в каретку для элемента TEXTAREA. Спасибо!
Филипп
1
это также работает в Chrome. спасибо, что сэкономили мне время :) и спасибо @Thinker за оригинальный код.
Вели Гебрев
Пришел сюда из поиска в Google. Я знаю, что вашему ответу год, но большое спасибо за это. Работает как шарм
Майк Терли
6
Является ли selимел в виду , чтобы быть глобальным?
qwertymk
1
Для тех, кто хочет версию coffeescript: gist.github.com/zachaysan/7100458
zachaysan
47

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

$.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}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Copy text from: <input id="in2copy" type="text" value="x"></label>
<label>Insert text in: <input id="in2ins" type="text" value="1,2,3" autofocus></label>
<button onclick="$('#in2ins').insertAtCaret($('#in2copy').val())">Insert</button>

Это не на 100% мое, я где-то гуглил, а потом настроился на мое приложение.

Использование: $('#element').insertAtCaret('text');

мыслитель
источник
Это также выделяет вставленный текст?
Оливер Стабли
2
Но это решение не сработает, когда пользователь переместит свой курсор куда-нибудь назад :) В любом случае, не важно.
Мыслитель
3
вы используете «это» как обернутый набор и как элемент. хммм .. только что попробовал и не работает без правок
Скотт Эверден
4
Я не мог заставить этот код работать. Я использую JQuery. Я пробовал и текстовую область, и текстовое поле. Я считаю, что this.value, например, должно быть this.val () и т. Д.
Ник
1
Да, в IE он вставлялся вверху DOM, а в Fox он ничего не делал. Используя последнюю
версию
19

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

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

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

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

Маркус
источник
13

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

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>

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

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

panchicore
источник
5
@temoto: Проголосовать за неанглийские имена переменных? Это все еще полностью читаемо как есть. Предполагается, что кнопка «вниз» используется, если ответ бесполезен, что здесь не так. Кстати, это также стоит вам немного репутации, когда вы отрицаете.
Джош М.
Потребовалось время, чтобы понять испанский код. и есть ошибка в этом коде. Он вставлялся всегда ближе к началу текстового поля, а не к концу. Например: если текст: Уважаемый пользователь, и при нажатии он вставлялся перед пользователем, а не после текстового пользователя.
Dev
@JoshM. Дело в том, что это дубликат более старого и более полного ответа, написанного Thinker здесь ... Он вынул некоторые из .focus()вызовов и обновлений до selectionStartи selectionEndпосле модификации. Испанские переменные могли быть использованы для обоснования другого ответа ...
CPHPython
12

Эй, это модифицированная версия, которая работает нормально в 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();
   }
 }
})
Babak Bandpay
источник
10

ты пробовала:

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

хотя не уверен насчет автоосветки.

РЕДАКТИРОВАТЬ :

Добавить:

$("#yourAnchor").click(function () {
    $("#yourTextarea").append("your text to append");
});
Джейсон
источник
Спасибо, я попробую, я новичок в jQuery, поэтому не знаю всех простых в использовании функций.
Оливер Стабли
Я тоже относительно новый. это весело и очень легко, когда вы освоитесь. Проверьте это для получения дополнительной ссылки: docs.jquery.com/Main_Page
Джейсон
5
Как отмечает Маркус ниже, append()не работает на значение а textarea. append()Метод нацелен на innerHTML, а не значение текстового поля.
Турадж
6

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

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

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

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

Русь Кэм
источник
5

Вот быстрое решение, которое работает в jQuery 1.9+:

а) Получить каретную позицию:

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

б) Добавить текст в позиции каретки:

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

в) Пример

$('textarea').each(function() {
  var $this = $(this);
  $this.click(function() {
    //get caret position
    var caret = getCaret($this);

    //append some text
    appendAtCaret($this, caret, 'Some text');
  });
});
Аврам Космин
источник
3

Это хорошо работает для меня в 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;
Длинный
источник
1

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

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

По вашему сценарию это будет

$('a').click(function() 
{ 
  $('textarea').append($('#area').val()); 
})
Технарь
источник
0

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

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

источник
0

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

d.popov
источник
0

Это похоже на ответ, данный @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;
   }
}
Dev
источник
0

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

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

function textType(){

  var **str1**=$("#textId1").val();

  var **str2**=$("#textId2").val();

  $("#textId1").val(str1+str2);

}

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

SidTechs1
источник
0
$.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) ;
        }
    }
});
Джордж СЕДРА
источник
-1

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

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

Remi

Remi
источник
1
Нет, это не так. Если вы измените html текстовой области, вы увидите содержимое там, но когда вы сохраните ФОРМУ, оно не будет работать, потому что для формы нужно значение текстовой области, а не внутренний HTML.
Тотемарио