JQuery সহ পাঠ্য পাঠ্য পাঠ্য .োকান

Question

আমি ভাবছি যে আমি কীভাবে অ্যাঙ্কর ট্যাগের ক্লিকে জেকারি ব্যবহার করে কোনও পাঠ্য অঞ্চলে পাঠ্য সন্নিবেশ করতে পারি।

আমি ইতিমধ্যে টেক্সারিয়ায় পাঠ্যটি প্রতিস্থাপন করতে চাই না, আমি পাঠ্যকে নতুন পাঠ্য যুক্ত করতে চাই।

Comments

যদি এটি সমাধান হয় - তবে নিজের মধ্যে এটি তৈরি করতে পছন্দ করবেন। এটি একটি ব্যক্তিগত ব্লগের জন্য আমি বন্ধুর বন্ধু করছি, সুতরাং এটি যে উপযুক্ত হবে এমন কোনও কিছুই।

— অলিভার স্টুইলি

সুতরাং আপনি একটি পাঠ্য নির্বাচন করতে চান, এবং যে কোনও একটি নির্বাচিত হয়েছে, কোনও পাঠ্যকে জনপ্রিয় করতে jquery ব্যবহার করুন, যদি তাই হয় তবে এই লেখাটি ম্যানুয়ালি বা কোনও বিশেষ ট্যাগ থেকে ইনপুট করা হবে?

— টিস্টেম্পার

টিস্ট্যাম্পার, আমি একটি বোতামে ক্লিক করতে সক্ষম হতে চাই এবং কোন পাঠ্যপাঠ্যে পাঠ্য সন্নিবেশ করানো হয় তার উপর নির্ভর করে।

— অলিভার স্টুবিলি

সুতরাং আপনি যদি "সাহসী" লেবেলযুক্ত বোতামটিতে ক্লিক করেন তবে আপনি টেক্সারিয়ায় সাহস চান?

— টিটিস্ট্যাম্পার

গা bold় পাঠ্য নয়,

— গা

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

পাঠ্য সংযোজন করার আরও সহজ উপায়ের জন্য আমার উত্তরটি পরীক্ষা করুন

— জেসন

@ জেসন- দুঃখিত, সত্য নয়, সংযোজনটি এইচটিএমএল ডেটা এইচটিএমএল উপাদান দিয়ে শুরু করার প্রত্যাশা করে: <পি

— টিস্টম্পার

ফলাফল যদি কোনও পিএইচপি পৃষ্ঠা থেকে আসে এবং jQuery দ্বারা পরিচালিত হয় তবে কীভাবে? (জসন ব্যবহার করে ডেটা সংক্রমণ করা হয়)

— আবু

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

এটি সত্যিই ভাল কাজ করে। আপনি একসাথে একাধিক জায়গায় sertোকাতে পারেন, যেমন:

$('#element1, #element2, #element3, .class-of-elements').insertAtCaret('text');

Comments

অ্যাভারে একটি ট্রেলিং}) রয়েছে তাই প্রথমে আমি চেষ্টা করেছিলাম যে সমাধানটি কাজ করছে না, তবে এটি ঠিক করার পরে এটি আই 7 এবং এফএফ 3.5 এ দুর্দান্ত কাজ করে। আপনি পাঠ্যের একটি টুকরো কেয়ার্টে একটি টেক্সটারিয়ার উপাদানটির জন্য সন্নিবেশ করতে পারেন। ধন্যবাদ!

— ফিলিপ

এটি ক্রোমেও কাজ করে। আমাকে কিছুটা সময় বাঁচানোর জন্য ধন্যবাদ :) এবং মূল কোডটির জন্য @ টিঙ্কারকে ধন্যবাদ।

— ভেলি জেব্রেভ

গুগল অনুসন্ধান থেকে এখানে এসেছি .. .আমি জানি আপনার উত্তরটি এক বছরের পুরনো, তবে এর জন্য অনেক ধন্যবাদ। মোহন মত কাজ করে

— মাইক টারলি

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

Highlightোকানো পাঠ্যও কি এই হাইলাইট করে?

— অলিভার স্টুইলি

তবে সেই সমাধানটি কার্যকর হবে না, যখন ব্যবহারকারী তার কার্সারটি কোথাও ফিরে নিয়ে যান :) যাইহোক, কিছুই নয়।

— চিন্তাবিদ

আপনি 'এটি' দুটি একটি মোড়ানো সেট এবং উপাদান হিসাবে ব্যবহার করেন। হুমম .. মাত্র চেষ্টা করা হয়েছে এবং এটি

— ডাব্লু

আমি এই কোডটি কাজ করতে পেলাম না। আমি jQuery ব্যবহার করছি। আমি একটি টেক্সারিয়া এবং একটি পাঠ্য ক্ষেত্র উভয়ই চেষ্টা করেছি। আমি বিশ্বাস করি এই উদাহরণটি উদাহরণস্বরূপ হওয়া উচিত val ওভাল (), ইত্যাদি

— নিক

হ্যাঁ IE এ এটি ডিওএমের শীর্ষে এবং ফক্সে সন্নিবেশ করাতে থাকে এটি কিছুই করেনি। সর্বশেষতম

— জিকুয়েরি

Answer 4

আমি জানি এটি একটি পুরানো প্রশ্ন তবে এই সমাধানটির সন্ধানকারী লোকদের জন্য এটি লক্ষ্য করার মতো যে আপনি কোনও টেক্সারিয়ায় সামগ্রী যুক্ত করতে অ্যাপেনড () ব্যবহার করবেন না। সংযোজন () পদ্ধতিটি অন্তর্নিহিত এইচটিএমএলকে লক্ষ্য করে টেক্সেরিয়ার মান নয়। বিষয়বস্তু টেক্সটরিয়ায় উপস্থিত হতে পারে তবে এটি উপাদানটির ফর্ম মূল্যে যুক্ত হবে না।

উপরে ব্যবহার হিসাবে উল্লিখিত:

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

ভাল কাজ করবে।

Answer 5

এটি আপনাকে পাঠ্য বাক্সে টুকরো টুকরো "ইনজেক্ট" করতে দেয়, ইনজেক্টের অর্থ: যেখানে পাঠ্য সংযোজন কর্সার সেখানে app

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>

যখন আমাদের "কার্যকরীকরণের পাঠ্য Inোকান" থাকে তখন মজাদার এবং আরও সেন্স হয়।

সমস্ত ব্রাউজারে কাজ করে।

Comments

@ আইটোটো: নন-ইংরাজী ভেরিয়েবল নামের জন্য ভোট? এটি এখনও যেমনটি রয়েছে তেমন সম্পূর্ণ পঠনযোগ্য। কোনও উত্তর সহায়ক না হলে ডাউন-ভোট বোতামটি ব্যবহার করা হবে যা এখানে ঘটনাটি নয়। বিটিডাব্লু আপনি যখন ভোট-ডাউন করেন তখন এটি আপনাকে কয়েক খ্যাতিও দেয় costs

— জোশ এম।

স্প্যানিশ কোড বুঝতে কিছুক্ষণ সময় নিয়েছে। এবং এই কোডটিতে একটি বাগ আছে। এটি সর্বদা শেষের পরিবর্তে পাঠ্য বাক্সের সূচনার দিকে সন্নিবেশ করছিল। উদাহরণস্বরূপ: পাঠ্যটি যদি হয়: প্রিয় ব্যবহারকারী এবং অনক্লিকিং এটি পাঠকের ব্যবহারকারীর চেয়ে প্রিয়কে আগে সন্নিবেশ করছিল।

— দেব

@JoshM। কথা হলো, এই সদৃশ থিঙ্কার দ্বারা লিখিত পুরোনো এবং আরো সম্পূর্ণ উত্তর এখানে ... তিনি কিছু বের করে .focus()করতে আমন্ত্রণ এবং আপডেট selectionStartএবং selectionEndপরিমার্জন পরে। স্প্যানিশ ভেরিয়েবলগুলি অন্য একটি উত্তরকে ন্যায়সঙ্গত করতে ব্যবহৃত হতে পারে ...

— সিপিএইচপিথন

Answer 6

হেজ এটি একটি পরিবর্তিত সংস্করণ যা আমার পক্ষে কমপক্ষে এফএফ-এ ঠিকঠাক কাজ করে এবং কেরেটের অবস্থানে serোকায়

  $.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 এ নতুন তাই সহজে ব্যবহারের সমস্ত কার্যকারিতা সম্পর্কে অবগত নই।

— অলিভার স্টুবলি

আমিও তুলনামূলকভাবে নতুন। আপনি যখন এটির হ্যাং পান এটি মজাদার এবং দুর্দান্ত আরও রেফারেন্সের জন্য এটি পরীক্ষা করে দেখুন: ডকস.জ্যাকারি

— জেসন

নীচে মার্কাস দ্বারা উল্লিখিত হিসাবে 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 সম্পাদক Y
• সমৃদ্ধ পাঠ্য সম্পাদক - 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

এটি একটি ছোটখাট বাগ সংশোধন করে @ পঞ্চিচিকোরের দেওয়া উত্তরের মতো।

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

সহজ সমাধান হবে: ( আসাম্প্শান : আপনি যাই হোক না কেন আপনি ভিতরে টাইপ চান পাঠ্যবাক্স সংযোজন করতে কি আগে থেকেই আছে পাঠ্য এলাকা )

ইন onClick <একটি> ট্যাগের ঘটনা, একটি ব্যবহারকারী-সংজ্ঞায়িত ফাংশন, যা এই আছে লিখুন:

function textType(){

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

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

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

}

(যেখানে আইডিস , টেক্সটআইডি 1 - o / p পাঠ্যআরিয়া পাঠ্য আইড 2- আই / পি পাঠ্যবক্সের জন্য)

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

Rémi

Comments

না এটা হয় না। আপনি যদি টেক্সেরিয়ার এইচটিএমএল পরিবর্তন করেন তবে আপনি সেখানে সামগ্রীটি দেখতে পাবেন, তবে আপনি যখন ফর্মটি সংরক্ষণ করেন তখন এটি কাজ করে না, কারণ ফর্মটির অভ্যন্তরীণ এইচটিএমএল নয়, টেক্সারিয়ার মান প্রয়োজন।

— টোথামারিও