আমি কীভাবে jQuery এ টেক্সেরিয়া পরিবর্তনের ইভেন্টের সাথে বাঁধতে পারি?

Question

কোনও পরিবর্তন ঘটে গেলে আমি ক্যাপচার করতে চাই <textarea>। কোনও অক্ষর (মোছা, ব্যাকস্পেস) বা মাউস ক্লিক করে পেস্ট বা কাটা টাইপ করা। এমন কোন jQuery ইভেন্ট রয়েছে যা এই সমস্ত ইভেন্টের জন্য ট্রিগার করতে পারে?

আমি ইভেন্ট পরিবর্তন করার চেষ্টা করেছি, তবে এটি উপাদান থেকে ট্যাবআউট করার পরে কলব্যাকটি ট্রিগার করে।

ব্যবহার : আমি কোনও বোতামে <textarea>কোনও পাঠ্য থাকলে তা সক্ষম করতে চাই ।

Comments

মূল ইভেন্টগুলিতে বাঁধাই যথেষ্ট নয় কারণ পাঠ্যটি মাউস দ্বারা পরিবর্তন করা যেতে পারে (প্রসঙ্গ মেনু থেকে "পেস্ট" / "কাট" বা ড্র্যাগ এবং ড্রপ)।

— কনস্ট্যান্টিন স্মোলিয়ানিন

অনুরূপ প্রশ্ন টেক্সটরিয়া অন্বেষণ সনাক্তকরণে আলোচনা করা হয় ।

— dma_k

Answer 1

বাস্তবে এটি ব্যবহার করে দেখুন:

$('#textareaID').bind('input propertychange', function() {

      $("#yourBtnID").hide();

      if(this.value.length){
        $("#yourBtnID").show();
      }
});

ডেমো

এটি আপনার করা কোনও পরিবর্তন, টাইপিং, কাটা, আটকানোর জন্য কাজ করে।

Comments

@ সেনথিলনাথন: ক্রোম এবং এফএফ-তে আমার পক্ষে তেমন কোনও কাজ নেই কারণ এটি ঠিক propertychangeসেখানেও নেইinput

— ব্লাস্টার

ব্যাকস্পেস কীটি যখন টেক্সটরিয়ায় টিপানো হয় তখন আমি এই দুটি ঘটনার দুটিই আইই 9 (আইই এর পুরাতন সংস্করণগুলি পরীক্ষা করে দেখেনি) তে আগুন জ্বালিয়েছি বলে সাবধান থাকুন।

— জাম্পা

এই ডেমোগুলি ব্যবহার করছে <input type="text">, না<textarea>

— বেন কলিন্স

'ইনপুট পরিবর্তন' তে 'ইনপুট সম্পত্তি' পরিবর্তন করুন যাতে এটি আই 9 তেও কাজ করে। paulbakaus.com/2012/06/14/propertychange-on-internet-explorer-9

— c0D3l0g1c

আমি দেখতে পেলাম যে আপনি ডেমোতে <ইনপুট টাইপ = "টেক্সারিয়া" কলস = "10" সারি = "4" /> গুরুত্ব সহকারে ব্যবহার করেছেন?

— DrLightman

Answer 2

bindঅবচয় করা হয়। ব্যবহার on:

$("#textarea").on('change keyup paste', function() {
    // your code here
});

দ্রষ্টব্য: উপরের কোডটি একাধিকবার জ্বলবে, প্রতিটি মিলের ট্রিগার-টাইপের জন্য। এটি পরিচালনা করতে, এই জাতীয় কিছু করুন:

var oldVal = "";
$("#textarea").on("change keyup paste", function() {
    var currentVal = $(this).val();
    if(currentVal == oldVal) {
        return; //check to prevent multiple simultaneous triggers
    }

    oldVal = currentVal;
    //action to be performed on textarea changed
    alert("changed!");
});

jsFizz ডেমো

Comments

on("change", function() ....অংশ আমার জন্য কাজ করছে না। কোনও সতর্কতা, না কনসোল লগ, কিছু ট্রিগার করে না। কীআপের জন্য যদিও কবজির মতো কাজ করে।

— সেবাস্তিয়ালসো

@Sebastialonso: on("change", function() ... হয় শুধুমাত্র বহিস্কার যখন পাঠ্য এলাকা ফোকাস হারায় । এটির জন্য আমার পূর্ববর্তী প্রশ্নটি দেখুন এবং এই ঝাঁকুনির চেষ্টা করে দেখুন - টেক্সটরিয়া পরিবর্তন করুন, তারপরে টেক্সটরিয়ার বাইরে ক্লিক করুন, এবং আপনার পরিবর্তিত ইভেন্টের গুলি ছোঁড়া উচিত।

— এসএনএগ

@ কোড করুন যে কোডটি ক্রোম 45 এ কাজ করছে না, তবে এটি এফএফ 41

— দারিয়াস

আপনি যদি সংস্করণ 1.7 এর আগে jQuery ব্যবহার করে আটকে থাকেন তবে এর পরে এটি প্রয়োগ হয় না

— কোড জকি

অবচয়হীন ফাংশনে ব্যবহারের জন্য আপভোটিং ing .Bind () এর চেয়ে অনেক বেশি

— ড্যানি হার্ডিং

Answer 3

একটি inputইভেন্ট ব্যবহার করুন ।

var button = $("#buttonId");
$("#textareaID").on('input',function(e){
  if(e.target.value === ''){
    // Textarea has no value
    button.hide();
  } else {
    // Textarea has a value
    button.show();
  }
});

Comments

ইন্টারনেট এক্সপ্লোরারের জন্য, এটি সঠিকভাবে কাজ করতে 9+ বা 10+ এমনকি প্রয়োজন।

— Udi,

এই সমাধান একটি কবজ মত কাজ করে। পরিবর্তন () এবং কীপ্রেস () ইভেন্ট হ্যান্ডলারের সীমাবদ্ধতাকে পুরোপুরি কাটিয়ে ওঠে। ধন্যবাদ একটি টন কাঁটাচামচ

— ভিকার

Answer 4

এই প্রশ্নের উত্সের সাথে আরও একটি আপ-টু-ডেট উত্তর দরকার। এটি আসলে যা কাজ করে (যদিও এর জন্য আমার কথাটি আপনাকে নিতে হবে না):

// Storing this jQuery object outside of the event callback 
// prevents jQuery from having to search the DOM for it again
// every time an event is fired.
var $myButton = $("#buttonID")

// input           :: for all modern browsers [1]
// selectionchange :: for IE9 [2]
// propertychange  :: for <IE9 [3]
$('#textareaID').on('input selectionchange propertychange', function() {

  // This is the correct way to enable/disabled a button in jQuery [4]
  $myButton.prop('disabled', this.value.length === 0)

}

1: https://developer.mozilla.org/en-US/docs/Web/Events/input# ব্রাউজার_কম্প্যাটিবিলিটি
2: আমরা BACKSPACE / DEL / do CUT
3 এ আঘাত করলে আইআই 9-তে অনিপুট ফায়ার হয় না : https: // msdn .microsoft.com / en-us / লাইব্রেরি / ms536956 (v = বনাম 85)। এসপিএক্স
4: http://api.jquery.com/prop/#prop-propertyName-function

তবে, আপনি আপনার প্রকল্প জুড়ে ব্যবহার করতে পারেন এমন আরও বিশ্বব্যাপী সমাধানের জন্য , আমি একটি নতুন, ক্রস ব্রাউজারের সামঞ্জস্যপূর্ণ ইভেন্টটি অর্জন করতে টেক্সটচেঞ্জ jQuery প্লাগইনটি ব্যবহার করার পরামর্শ দিচ্ছি textchange। এটি একই ব্যক্তির দ্বারা বিকশিত হয়েছিল যিনি onChangeফেসবুকের রিএ্যাকটিজেএস-এর সমতুল্য ইভেন্টটি প্রয়োগ করেছিলেন , যা তারা তাদের প্রায় সম্পূর্ণ ওয়েবসাইটের জন্য ব্যবহার করেন। এবং আমি মনে করি এটি নিরাপদ বলে মনে করি, যদি এটি ফেসবুকের জন্য একটি শক্তিশালী পর্যাপ্ত সমাধান হয় তবে এটি সম্ভবত আপনার পক্ষে যথেষ্ট শক্ত। :-)

আপডেট: আপনার যদি ইন্টারনেট এক্সপ্লোরারটিতে ড্র্যাগ এবং ড্রপ সমর্থন মতো বৈশিষ্ট্যের প্রয়োজন হয় তবে আপনি পরিবর্তে pandellএর আরও আপডেট হওয়া কাঁটাচামচটিjquery-splendid-textchange পরীক্ষা করতে চাইতে পারেন ।

Comments

যদিও মনে হয় "সিলেকশন এক্সচেঞ্জ" কেবলমাত্র নথিতে প্রয়োগ করা হলে কাজ করে। সক্রিয় উপাদানটি "ডকুমেন্ট.একটিভএলমেন্ট" দিয়ে পাওয়া যায়।

— tfE

Answer 5

2018, জ্যাকুয়ারি ছাড়াই

প্রশ্ন হল সঙ্গে , jQuery এটা শুধু অবগতির জন্য আছে।

জাতীয়

let textareaID = document.getElementById('textareaID');
let yourBtnID = document.getElementById('yourBtnID');
textareaID.addEventListener('input', function() {
    yourBtnID.style.display = 'none';
    if (textareaID.value.length) {
        yourBtnID.style.display = 'inline-block';
    }
});

এইচটিএমএল

<textarea id="textareaID"></textarea>
<button id="yourBtnID" style="display: none;">click me</div>

Answer 6

এখানে উল্লিখিত সংস্করণগুলির তুলনায় অন্য একটি (আধুনিক) তবে কিছুটা আলাদা সংস্করণ। আইই 9 এর সাথে পরীক্ষিত:

$('#textareaID').on('input change keyup', function () {
  if (this.value.length) {
    // textarea has content
  } else {
    // textarea is empty
  }
});

পুরানো ব্রাউজারগুলির জন্য আপনিও যুক্ত করতে পারেন selectionchangeএবং propertychange(অন্যান্য উত্তরে উল্লিখিত)। তবে selectionchangeআইই 9 তে আমার পক্ষে কাজ করেনি। এজন্য আমি যুক্ত করেছি keyup।

Answer 7

ফোকাসআউট দিয়ে এটি করার চেষ্টা করুন

$("textarea").focusout(function() {
   alert('textarea focusout');
});

Answer 8

এটা চেষ্টা কর ...

$("#txtAreaID").bind("keyup", function(event, ui) {                          

              // Write your code here       
 });

Comments

মূল ইভেন্টগুলিতে বাঁধাই যথেষ্ট নয় কারণ পাঠ্যটি মাউস দ্বারা পরিবর্তন করা যেতে পারে (প্রসঙ্গ মেনু থেকে "পেস্ট" / "কাট" বা ড্র্যাগ এবং ড্রপ)।

— কনস্ট্যান্টিন স্মোলিয়ানিন

Answer 9

.delegate একমাত্র আমার সাথে jQuery জাভাস্ক্রিপ্ট লাইব্রেরি v2.1.1 নিয়ে কাজ করছে with

 $(document).delegate('#textareaID','change', function() {
          console.log("change!");
    });

Answer 10

কিছু পরীক্ষার পরে আমি এই বাস্তবায়নটি নিয়ে এসেছি:

$('.detect-change')
    .on('change cut paste', function(e) {
        console.log("Change detected.");
        contentModified = true;
    })
    .keypress(function(e) {
        if (e.which !== 0 && e.altKey == false && e.ctrlKey == false && e.metaKey == false) {
            console.log("Change detected.");
            contentModified = true;
        }
    });

যে কোনও ধরণের ইনপুটটিতে পরিবর্তনগুলি পরিচালনা করে এবং তীরচিহ্নগুলি এবং সিটিআরএল, সেন্টিমিডি, ফাংশন কী ইত্যাদির মতো বিষয়গুলি উপেক্ষা করে টেক্সটরিয়াস নির্বাচন করুন select

দ্রষ্টব্য: আমি এফএফ-তে এটি চেষ্টা করেছি যেহেতু এটি কোনও এফএফ অ্যাড-অনের জন্য।

Answer 11

এটা চেষ্টা কর

 $('textarea').trigger('change');
 $("textarea").bind('cut paste', function(e) { });

Comments

এটি সম্পূর্ণ ভুল নয়। আসলে যদি কেউ একত্রিত হয় $("#textarea").on('change keyup paste', function() {})এবং $('textarea').trigger('change');সেই সমস্যাটি সমাধান করতে পারে pasteযা স্বয়ংক্রিয়ভাবে কাজ করতে বাধা দেয় !

— loretoparisi