JQuery के साथ textarea में पाठ डालें

Question

मैं सोच रहा हूं कि कैसे मैं एक एंकर टैग के क्लिक पर jquery का उपयोग करके पाठ क्षेत्र में पाठ सम्मिलित कर सकता हूं।

मैं पहले से ही textarea में पाठ को बदलना नहीं चाहता, मैं textarea को नया पाठ जोड़ना चाहता हूं।

Comments

यदि यह समाधान है - हालांकि, इसे अपने आप में बनाना पसंद करेंगे। यह एक व्यक्तिगत ब्लॉग के लिए मैं fora दोस्त कर रहा हूँ, तो कुछ भी है कि यह फिट होगा।

— ओलिवर स्टेल्गी

तो आप एक पाठ का चयन करना चाहते हैं, और जो भी चयनित हो, एक टेक्स्टारिया को आबाद करने के लिए jquery का उपयोग करें, यदि ऐसा है तो यह पाठ कहाँ से आ रहा है, मैन्युअल रूप से या विशेष टैग से इनपुट किया गया है?

— 19 जनवरी को TStamper

TStamper, मैं एक बटन क्लिक करने में सक्षम होना चाहता हूं, और इस पर निर्भर करता है कि टेक्स्टरा में सम्मिलित पाठ क्या है।

— ओलिवर स्टेल्गी

इसलिए यदि आप "बोल्ड" लेबल वाले बटन पर क्लिक करते हैं तो आप टेक्स्टारिया में बोल्ड चाहते हैं?

— TStamper

बोल्ड टेक्स्ट नहीं, लेकिन बोल्ड टैग (शायद html के विपरीत कस्टम)

— ओलिवर स्टैबलिटी

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

Comments

पाठ को जोड़ने के लिए बहुत आसान तरीके से मेरे उत्तर की जांच करें

— जेसन

@ जेसन- माफ करना, यह सच नहीं है, अप्प को उम्मीद है कि html डेटा एक html एलिमेंट के साथ शुरू होगा ex: <p

— TStamper

यदि परिणाम PHP पेज से आ रहा है और jQuery द्वारा संभाला जाता है तो कैसे होगा? (बीच में डेटा Json का उपयोग करके प्रेषित होता है)

— अबू रेने

Answer 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');

Comments

Awer में एक अनुगामी}) है, इसलिए पहले तो मुझे लगा कि समाधान काम नहीं कर रहा है, लेकिन इसे ठीक करने के बाद, यह IE7 और FF3.5 में बहुत अच्छा काम करता है। आप TEXTAREA तत्व के लिए टेक्स्ट पर एक टुकड़ा डाल सकते हैं। धन्यवाद!

— फिलिप

यह क्रोम में भी काम करता है। मुझे कुछ समय बचाने के लिए धन्यवाद :) और मूल कोड के लिए @ थिंकर को धन्यवाद।

— वेलि गेब्रेव

एक Google खोज से यहाँ आया था। मुझे पता है कि आपका उत्तर एक वर्ष पुराना है, लेकिन इसके लिए बहुत बहुत धन्यवाद। एक आकर्षण की तरह काम करता है

— माइक टरले जूल

है selवैश्विक होना?

— क्वेर्त्मीक

किसी के लिए जो कॉफ़ीस्क्रिप्ट संस्करण चाहता है: gist.github.com/zachaysan/7100458

— zachaysan

Answer 3

मैं अपने कोड में इस फ़ंक्शन का उपयोग करता हूं:

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

Comments

क्या यह डाला गया टेक्स्ट भी हाइलाइट करता है?

— ओलिवर स्टैबलि

लेकिन वह समाधान काम नहीं करेगा, जब उपयोगकर्ता अपने कर्सर को कहीं पीछे ले जाएगा :) वैसे भी, कोई बात नहीं।

— विचारक

आप एक लिपटे सेट और एक तत्व दोनों के रूप में 'इस' का उपयोग करते हैं। हम्मम .. बस कोशिश की और यह w / o संपादन काम नहीं करता

— स्कॉट एवरडेन

मुझे यह कोड काम करने के लिए नहीं मिला। मैं jQuery का उपयोग कर रहा हूँ। मैंने एक textarea और एक पाठ क्षेत्र दोनों की कोशिश की। मेरा मानना ​​है कि इस उदाहरण के लिए। यह होना चाहिए (), आदि ..

— निक

IE पर हाँ, यह DOM के शीर्ष पर डाला जाता रहा और Fox पर इसने कुछ नहीं किया। नवीनतम JQuery का उपयोग ...

— कैविट्रोब

Answer 4

मुझे पता है कि यह एक पुराना प्रश्न है, लेकिन इस समाधान की खोज करने वाले लोगों के लिए यह ध्यान देने योग्य है कि आपको एक पाठ्य सामग्री में सामग्री जोड़ने के लिए परिशिष्ट () का उपयोग नहीं करना चाहिए। append () विधि का लक्ष्य आंतरिक HTML है, जो textarea का मूल्य नहीं है। सामग्री टेक्सटेरिया में दिखाई दे सकती है लेकिन यह तत्व के फॉर्म वैल्यू में नहीं जोड़ा जाएगा।

जैसा कि ऊपर उल्लेख किया गया है:

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

ठीक काम करेगा।

Answer 5

यह आपको पाठ के एक टुकड़े को टेक्स्टबॉक्स में "इंजेक्ट" करने की अनुमति देता है, इंजेक्शन का अर्थ है: उस पाठ को जोड़ता है जहां कर्सर है।

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>

जब हमारे पास "टेक्स्ट में टैग डालें" कार्यक्षमता होती है, तो मज़ेदार और अधिक सीन्स होते हैं।

सभी ब्राउज़रों में काम करता है।

Comments

@temoto: गैर-अंग्रेजी चर नामों के लिए डाउन-वोट? यह अभी भी पूरी तरह से पठनीय है। यदि कोई उत्तर सहायक नहीं है, तो डाउन-वोट बटन का उपयोग किया जाना चाहिए, जो यहां नहीं है। जब आप डाउन-वोट करते हैं तो BTW से आपको कुछ प्रतिष्ठा भी हासिल होती है।

— जोश एम।

स्पेनिश कोड को समझने में थोड़ा समय लगा। और इस कोड में एक बग है। यह हमेशा पाठ बॉक्स के प्रारंभ की ओर अंत के बजाय सम्मिलित हो रहा था। पूर्व के लिए: यदि पाठ है: प्रिय उपयोगकर्ता और उस पर पाठ उपयोगकर्ता के बजाय प्रिय से पहले डाला गया था।

— देव

@JoshM। बात यह है, यह थिंकर द्वारा लिखे गए पुराने और अधिक पूर्ण उत्तर का एक डुप्लिकेट है ... उसने संशोधन के बाद और बाद के कुछ .focus()इनवोकेशन और अपडेट्स को निकाल लिया । स्पैनिश चर का उपयोग किसी अन्य उत्तर के औचित्य के लिए किया जा सकता है ...selectionStartselectionEnd

— CPHPython

Answer 6

हेज यह एक संशोधित संस्करण है जो मेरे लिए एफएफ @ लिस्ट में ओके का काम करता है और करियर की स्थिति में सम्मिलित होता है

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

Answer 7

आपने कोशिश की है:

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

हालांकि ऑटोहिघलाइटिंग के बारे में निश्चित नहीं है।

संपादित करें :

जोड़ने के लिए:

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

Comments

धन्यवाद, मैं इसे जाने दूंगा, मैं jQuery के लिए नया हूं इसलिए मैं सभी कार्यों का उपयोग करने के लिए आसान नहीं हूं।

— ओलिवर घुलनशील

मैं अपेक्षाकृत नया हूँ। एक बार जब आप इसे लटका लेते हैं तो यह मज़ेदार और सुपर आसान होता है। अधिक संदर्भ के लिए इसे देखें: docs.jquery.com/Main_Page

— जेसन

जैसा कि नीचे मार्कस ने कहा है, append()ए के मूल्य पर काम नहीं करता है textarea। append()विधि innerHTML, पाठ क्षेत्र की नहीं मूल्य निशाना बनाता है।

— तुरादग

Answer 8

क्या आप के लिए पूछना चाहिए सीधे jQuery में सीधा होना चाहिए-

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

सबसे अच्छा तरीका है कि मैं सम्मिलित पाठ को हाइलाइट करने के बारे में सोच सकता हूं यह एक सीएसएस वर्ग के साथ एक स्पैन में लपेटकर background-colorआपकी पसंद के रंग के साथ सेट है। अगले इंसर्ट पर, आप किसी भी मौजूदा स्पैन से क्लास को हटा सकते हैं (या स्पैन्स को स्ट्रिप कर सकते हैं)।

हालाँकि, बाजार पर बहुत सारे मुफ्त WYSIWYG HTML / रिच टेक्स्ट एडिटर उपलब्ध हैं, मुझे यकीन है कि कोई आपकी ज़रूरतों को पूरा करेगा

• TinyMCE - जावास्क्रिप्ट WYSIWYG संपादक
• रिच टेक्स्ट एडिटर - YUI लाइब्रेरी
• 10 jQuery और गैर- jQuery जावास्क्रिप्ट रिच टेक्स्ट संपादक

Answer 9

यहाँ एक त्वरित समाधान है जो 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');
  });
});

Answer 10

यह क्रोम 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;

Answer 11

यदि आप उन्हें हटाए बिना पाठ्य सामग्री को जोड़ना चाहते हैं, तो आप नीचे की कोशिश कर सकते हैं

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

आपके परिदृश्य के अनुसार यह होगा

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

Answer 12

मुझे लगता है कि यह बेहतर होगा

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

Answer 13

एक अन्य समाधान भी यहाँ वर्णित है यदि आपके मामले में कुछ अन्य स्क्रिप्ट काम नहीं करती हैं।

Answer 14

यह @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;
   }
}

Answer 15

सरल समाधान होगा: ( मान लें : आप चाहते हैं कि जो भी आप टेक्स्टबॉक्स के अंदर टाइप करें , वह टेक्स्टएडिया में पहले से ही मौजूद है )

<A> टैग के ऑनक्लिक इवेंट में, उपयोगकर्ता-परिभाषित फ़ंक्शन लिखें, जो यह करता है:

function textType(){

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

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

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

}

(जहां आईडी, textId1 - ओ / पी के लिए textArea textId2 -for i / p textbox ')

Answer 16

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

Answer 17

मैं इस्तेमाल किया है और यह ठीक काम :)

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

रेमी

Comments

नहीं, यह नहीं है। यदि आप टेक्‍स्‍टेरिया के HTML को बदलते हैं, तो आपको वहां सामग्री दिखाई देती है, लेकिन जब आप FORM को सेव करते हैं तो यह काम नहीं करता है, क्‍योंकि फॉर्म को टेक्‍स्‍टारिया मान की जरूरत होती है, न कि आंतरिक HTML की।

— टोटेमेरियो