JQuery ব্যবহার করে একটি <ইনপুট টাইপ = "পাঠ্য"> (তাত্ক্ষণিকভাবে) সমস্ত পরিবর্তনগুলি সনাক্ত করুন


397

ক এর মান <input type="text">পরিবর্তন করতে পারে এমন অনেকগুলি উপায় রয়েছে যার মধ্যে রয়েছে:

  • keypresses
  • / কপি পেস্ট
  • জাভাস্ক্রিপ্ট দিয়ে পরিবর্তিত
  • ব্রাউজার বা একটি সরঞ্জামদণ্ড দ্বারা স্বয়ংক্রিয়ভাবে সম্পূর্ণ

আমি চাই যে আমার জাভাস্ক্রিপ্ট ফাংশনটি যে কোনও সময় পরিবর্তিত হলে (বর্তমান ইনপুট মান সহ) কল করা হোক। এবং আমি চাই এখনই এই মুহুর্তে ডাকা হবে, যখন ইনপুট ফোকাস হারাবে না।

আমি সমস্ত ব্রাউজারগুলিতে এটি করতে সবচেয়ে পরিষ্কার এবং সবচেয়ে দৃ way় উপায়ের সন্ধান করছি (পছন্দসই jQuery ব্যবহার করে)।



উত্তর:


352

এই jQuery কোডটি যে কোনও উপাদানটিতে তাত্ক্ষণিক পরিবর্তনগুলি এনেছে এবং সমস্ত ব্রাউজারে কাজ করা উচিত:

 $('.myElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       ....
     }
   });
 });

19
প্রত্যেকের রেফারেন্সের inputজন্য, এইচটিএমএল 5 ইভেন্টটি যা আমি বিশ্বাস করি যে সমস্ত আধুনিক ব্রাউজারগুলি ( এমডিএন রেফারেন্স ) কভার করা উচিত । keyupকিছুটা হলেও দেরি না করে ( inputকী ডাউনে ট্রিগার করা হয়) বাকিটি ধরা উচিত । propertychangeএকটি স্বত্বাধিকারী এমএস ইভেন্ট, এবং আমি নিশ্চিত না যে pasteআসলে প্রয়োজনীয় কিনা ।
জো লিস

71
জাভাস্ক্রিপ্টের মতো পাঠ্য পরিবর্তিত হলে আমি কী ভুল করছি বা এটি পরিচালনা করছে নাdocument.getElementById('txtInput').value = 'some text';
মেহমেট আতাş

5
মেহমেট, কোডটি জেএসের মাধ্যমে পরিবর্তিত মানগুলি বোঝাতে নয়।
ফটম্যান

12
@ মেহমেটআটাş আংশিকভাবে সঠিক। এখানেinput ইভেন্টের রেফারেন্সে বলা হয়েছে যে জাভাস্ক্রিপ্টের মাধ্যমে বিষয়বস্তুগুলি সংশোধন করা হলে এটি আগুন দেয় না। যাইহোক, onpropertychangeঘটনা নেই জাতীয় মাধ্যমে পরিমার্জন করে গুলি (দেখুন এখানে )। সুতরাং এই কোডটি কার্যকর হবে যখন বিষয়বস্তুগুলিতে আইএস-তে জেএসের মাধ্যমে সংশোধন করা হবে তবে অন্যান্য ব্রাউজারগুলিতে কাজ করবে না।
ভিকি চিজওয়ানি

2
সম্পত্তি বদল, কীআপ ইত্যাদির সময় আপনি ইনপুটটিতে একটি কাস্টম ইভেন্ট ট্রিগার করতে পারেন এবং তারপরে যেকোন স্থান ব্যবহার করতে পারেন।
ইভান ইভভকুইć

122

JQuery> = 1.9 এর জন্য একটি রিয়েল-টাইম অভিনব সমাধান

$("#input-id").on("change keyup paste", function(){
    dosomething();
})

আপনি যদি "ক্লিক" ইভেন্টটি সনাক্ত করতে চান তবে ঠিক:

$("#input-id").on("change keyup paste click", function(){
    dosomething();
})

আপনি যদি jQuery <= 1.4 ব্যবহার করছেন তবে কেবল liveপরিবর্তে ব্যবহার করুন on


3
এটি একটি ত্রুটি আছে। আপনি যদি ট্যাব কী দিয়ে ইনপুট ক্ষেত্রটি ছেড়ে দেন - সামগ্রীটি সম্পাদনা না করা হলেও এটি কীপ ইভেন্টটি ছুঁড়ে দেবে।
পাওকা

2
ডেটটাইমপিকার # ইনপুট-আইডি পূরণ করলে কীভাবে সনাক্ত করবেন? কোনও ইভেন্ট (পরিবর্তন, পেস্ট) কাজ করে না।
পাঠ্রস

এটা অসাধারণ! আমি jquery 1.8.3 দিয়ে চেষ্টা করেছি এবং এটি কাজ করে। আমার কাছে এখনও কিছু লাইভাক্যারি () কোড রয়েছে যা আমাকে প্রতিস্থাপন করতে হবে তাই আমি এমনকি ১.৯.১ এও আপগ্রেড করতে পারি না। আমি জানি এটি পুরানো তবে পুরো ওয়েবসাইটটিও তাই।
এ্যাসেল

এফওয়াইআই: কীবোর্ডটি বৈধ নয় এমন একটি তারিখ নির্বাচনের জন্য ব্যবহার করা হয়, তবে এই ইভেন্টগুলি একটি ফাঁকা মান দিয়ে ফায়ার করবে। অর্থাত। 30. ফেব্রুয়ারী stackoverflow.com/questions/48564568/...
Olmstov

107

দুর্ভাগ্যক্রমে, আমি মনে করি setIntervalপুরস্কারটি জিতেছে:

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

কোডের কেবলমাত্র 1 লাইনে এটি সবচেয়ে পরিষ্কার সমাধান। এটি সর্বাধিক শক্তিশালী, যেহেতু আপনাকে বিভিন্ন ইভেন্ট / উপায়গুলির কোনও inputমূল্য পেতে পারে তা নিয়ে চিন্তা করতে হবে না ।

'সেটইন্টারভাল' ব্যবহারের ডাউনসাইডগুলি এক্ষেত্রে প্রযোজ্য বলে মনে হয় না:

  • 100 মাইলস বিলম্বিত? অনেক অ্যাপ্লিকেশনগুলির জন্য, 100 মিমি যথেষ্ট দ্রুত।
  • ব্রাউজারে লোড যুক্ত হয়েছে? সাধারণভাবে, আপনার পৃষ্ঠায় প্রচুর ভারী ওজন সেট অন্তর্ভুক্ত করা খারাপ। তবে এই বিশেষ ক্ষেত্রে, যুক্ত পৃষ্ঠা লোডটি সনাক্ত করা যায় না।
  • এটা অনেক ইনপুট স্কেল না? বেশিরভাগ পৃষ্ঠাগুলিতে মুষ্টিমেয় ইনপুট থাকে না, যা আপনি একই সেট ইনটারভালগুলিতে স্নিগ্ধ করতে পারেন।

21
নিন্টেন্ডো 3 ডি এস ব্রাউজার ব্যবহার করার সময় এটি কোনও ফর্মের ইনপুট ক্ষেত্রে পরিবর্তনগুলি সনাক্ত করার একমাত্র উপায় বলে মনে হয় (সংস্করণ / 1.7552.EU)।
জোহান

4
দ্রষ্টব্য: ওভারলোড সহজ করা যায়। আপনি যদি ইনপুটটি ফোকাস এবং ক্লিয়ার হয়ে যায় যখন অন্তর্গত সেট শুরু করেন ইনপুট যখন ফোকাস হারিয়ে ফেলবে
Tebe

10
আপনি কেন অবিচ্ছিন্নভাবে 100 মিমি বিরতি তৈরি করবেন যেখানে এটি অবিচ্ছিন্নভাবে চালিত হওয়ার কোনও কারণ নেই? ইভেন্টগুলি মানুষ। তাদের ব্যাবহার করুন.
গ্যাভিন

15
@ গ্যাভিন, এই বিশেষ ক্ষেত্রে জেএসের ইভেন্টগুলির অভাব আছে .. আমাদের এমন ইভেন্টের একটি সেট সন্ধান করুন যা সনাক্ত করতে পারে, ব্যবহারকারীর ইনপুট, ব্যবহারকারীর আটকানো, ব্যবহারকারীর কাট, জাভাস্ক্রিপ্ট সন্নিবেশ, জাভাস্ক্রিপ্ট অপসারণ, ফর্মগুলির স্বয়ংসম্পূর্ণকরণ, গোপন ফর্মগুলি, কোনও কিছুই প্রদর্শিত হয়নি ফর্ম নেই।
নর্মসিম

2
@ গ্যাভিন জেএস-এর কোনও আনপঞ্জড ইভেন্ট রয়েছে বলে মনে হয় না যা প্রতিটি সময়ই একটি ইনপুট পরিবর্তিত হয়। (ইভেন্ট ডেলিভারির সমাধানের কাজটি দেখার জন্য কেবল কোনও ডকুমেন্ট.জেটএলমেন্টবিআইআইডি (নাম) করুন val মূল্য Math ম্যাথ.আরেন্ডম ()) করুন।
জোয়েরি

58

oninputইভেন্টটির বাইন্ডিং বেশিরভাগ বুদ্ধিমান ব্রাউজারগুলিতে দুর্দান্ত কাজ করছে বলে মনে হচ্ছে। আইই 9 এটি সমর্থন করেও, তবে বাস্তবায়নটি বগি হয় (চরিত্রগুলি মোছার সময় ইভেন্টটি চালিত হয় না)।

JQuery সংস্করণ 1.7+ সহ onপদ্ধতিটি ইভেন্টটির সাথে আবদ্ধ হতে কার্যকর:

$(".inputElement").on("input", null, null, callbackFunction);

12
oninputইভেন্টটি input[type=reset]জাভাস্ক্রিপ্ট সম্পাদনার সাথে কাজ করে না যেমন আপনি এই পরীক্ষায় দেখতে পারেন: codepen.io/yukulele/pen/xtEpb
Yukulélé

2
@ ইউকুল্লি, কমপক্ষে আমরা সম্ভাব্য সমস্ত ব্যবহারকারীর ক্রিয়া সনাক্ত করার চেষ্টা করার চেয়ে এটি আরও সহজেই কাজ করতে পারি ।
পেসারিয়ার 0

30

2017 উত্তর : ইনপুট ইভেন্টটি IE8 এর চেয়ে সাম্প্রতিক যে কোনও কিছুর জন্য ঠিক এটি করে।

$(el).on('input', callback)

6
দুঃখিত তবে ... উপরের এইচআরজে-র 2012 উত্তর থেকে কীভাবে এটি আলাদা? যাইহোক, inputইভেন্ট জেএস পরিবর্তনগুলি সনাক্ত করতে ব্যর্থ হচ্ছে।
ডেভিড

16

দুর্ভাগ্যক্রমে এমন কোনও ইভেন্ট বা ইভেন্টের সেট নেই যা আপনার মানদণ্ডের সাথে মেলে। কীপ্রেস এবং অনুলিপি / পেস্ট উভয়ই keyupইভেন্টটির সাথে পরিচালনা করা যায় । জেএস এর মাধ্যমে পরিবর্তনগুলি জটিলতর। পাঠ্যবক্সটি সেট করে এমন কোডের উপরে যদি আপনার নিয়ন্ত্রণ থাকে তবে আপনার সেরা বাজি হ'ল হয় আপনার ফাংশনটি সরাসরি কল করতে বা পাঠ্যবক্সে কোনও ব্যবহারকারী ইভেন্টকে ট্রিগার করতে:

// Compare the textbox's current and last value.  Report a change to the console.
function watchTextbox() {
  var txtInput = $('#txtInput');
  var lastValue = txtInput.data('lastValue');
  var currentValue = txtInput.val();
  if (lastValue != currentValue) {
    console.log('Value changed from ' + lastValue + ' to ' + currentValue);
    txtInput.data('lastValue', currentValue);
  }
}

// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());

// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);

// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
  $('#txtInput').val('abc def').trigger('set');
});

যদি আপনার setInterval()সেই কোডটির নিয়ন্ত্রণ না থাকে তবে আপনি পরিবর্তনের জন্য পাঠ্যবক্সটি 'দেখার' ব্যবহার করতে পারেন :

// Check the textbox every 100 milliseconds.  This seems to be pretty responsive.
setInterval(watchTextbox, 100);

এই ধরণের সক্রিয় পর্যবেক্ষণ আপডেটগুলি 'তাত্ক্ষণিকভাবে' ধরবে না, তবে এটি যথেষ্ট দ্রুত বলে মনে হচ্ছে যে কোনও অনুধাবন করার পিছনে নেই। ডাঃলুই মন্তব্যগুলিতে যেমন উল্লেখ করেছেন, আপনার প্রচুর ইনপুট দেখার প্রয়োজন হলে এই সমাধানটি সম্ভবত ভাল স্কেল করে না। setInterval()আরও বা কম ঘন ঘন পরীক্ষা করতে আপনি সর্বদা ২ য় প্যারামিটারটি সামঞ্জস্য করতে পারেন ।


এফওয়াইআই আসলে এমন অনেকগুলি ইভেন্ট রয়েছে যা ব্রাউজারগুলিতে বিভিন্ন ডিগ্রীতে ওপিএসের মানদণ্ডের সাথে মিলিত হতে পারে (প্রথম প্রশ্ন মন্তব্যের লিঙ্কগুলি দেখুন)। এই উত্তরটি কোনও কথিত ইভেন্ট ব্যবহার করে না, এবং বিদ্রূপাত্মকভাবে সম্ভবত সামান্য পিছিয়ে থাকা সত্ত্বেও সমস্ত ব্রাউজারগুলিতে ঠিক একইভাবে কাজ করবে;)
ক্রিসেন্ট ফ্রেশ

ওপি জাভাস্ক্রিপ্টের মাধ্যমে টেক্সটবক্সে পরিবর্তনগুলি ধরতে চায় (উদাঃ myTextBox.value = 'foo';কোনও জাভাস্ক্রিপ্ট ইভেন্ট এ পরিস্থিতিটি পরিচালনা করে না
আন্নবেল

1
যদি কারও কাছে ট্যাবগুলি রাখার জন্য 50 টি ক্ষেত্র থাকে?
ডক্টরলুই

1
হ্যাঁ, আমার ক্ষেত্রে আমার কেবল 1 টি ক্ষেত্র রয়েছে, তবে কেন আমি এটি দেখতে পাচ্ছি না কেন এটি বেশ কয়েকটি ক্ষেত্রের জন্য যুক্তিসঙ্গতভাবে ভাল কাজ করবে না। কেবলমাত্র 1 সেটটাইমআউট থাকা সমস্ত ইনপুট চেক করে রাখা সম্ভবত সবচেয়ে দক্ষ হবে।
ডাস্টিন বসওয়েল

1
@ ডগলাস: কোনও জাভাস্ক্রিপ্ট ইভেন্ট সেই পরিস্থিতিটি পরিচালনা করে না - সংশোধন: আইই এটির সাথে পরিচালনা করতে পারে input.onpropertychangeএবং এফএফ 2 +, অপেরা 9.5, সাফারি 3 এবং ক্রোম 1 এটি পরিচালনা করতে পারে input.__defineSetter__('value', ...)(যা এটি ডম নোডগুলিতে কার্যকরী নয় বলে নথিভুক্ত করা হয়েছে, আমি যাচাই করতে পারি এটি কাজ করে)। আইই এর বাস্তবায়ন থেকে একমাত্র বিচ্যুতি হ'ল হ্যান্ডলারটি কেবল প্রোগ্রাম্যাটিক সেটিংয়েই নয়, মূল ইভেন্টগুলির সময়ও আগুন ধরিয়ে দেয়।
ক্রিসেন্ট তাজা

6

আপনি যদি অন্য কোনও উত্তর অভিনব না করেন তবে এখানে কিছুটা আলাদা সমাধান দেওয়া হল:

var field_selectors = ["#a", "#b"];
setInterval(function() { 
  $.each(field_selectors, function() { 
    var input = $(this);
    var old = input.attr("data-old-value");
    var current = input.val();
    if (old !== current) { 
      if (typeof old != 'undefined') { 
        ... your code ...
      }
      input.attr("data-old-value", current);
    }   
  }   
}, 500);

বিবেচনা করুন যে আপনি প্রসঙ্গ মেনু পেস্ট ক্যাপচার করতে ক্লিক এবং কীআপ উপর নির্ভর করতে পারবেন না।


এই উত্তরটি আমার পক্ষে সবচেয়ে ভাল কাজ করেছে। আমি আমার নির্বাচকদের সঙ্গে কিছু সমস্যা ছিল যতক্ষন না আমি ব্যবহৃত: $("input[id^=Units_]").each(function() {
robr

4

এই কোডটি কোথাও যুক্ত করুন, এটি কৌশলটি করবে।

var originalVal = $.fn.val;
$.fn.val = function(){
    var result =originalVal.apply(this,arguments);
    if(arguments.length>0)
        $(this).change(); // OR with custom event $(this).trigger('value-changed');
    return result;
};

এই সমাধানটি ভ্যাল () এ পাওয়া গেছে jQuery এ পরিবর্তন () পরিবর্তন করে না


3

আমি একটি নমুনা তৈরি করেছি। এটা আপনার জন্য কাজ করবে।

var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;

var oldData = $("p.content").html();
$('#tyingBox').keydown(function () {
    clearTimeout(typingTimer);
    if ($('#tyingBox').val) {
        typingTimer = setTimeout(function () {
            $("p.content").html('Typing...');
        }, doneTypingInterval);
    }
});

$('#tyingBox').keyup(function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function () {
        $("p.content").html(oldData);
    }, finaldoneTypingInterval);
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea>
<p class="content">Text will be replace here and after Stop typing it will get back</p>

http://jsfiddle.net/utbh575s/


3

জাভা স্ক্রিপ্ট পরিবর্তনগুলি সনাক্ত করার জন্য আমাদের আসলে লুপ সেটআপ করার দরকার নেই। আমরা ইতিমধ্যে আমরা যে উপাদানটি সনাক্ত করতে চাইছি তাতে অনেক ইভেন্ট শ্রোতাদের সেট আপ করেছি। যে কোনও অ-ক্ষতিকারক ইভেন্টকে কেবল ট্রিগার করা কাজটি তৈরি করবে।

$("input[name='test-element']").on("propertychange change click keyup input paste blur", function(){
console.log("yeh thats worked!");
});

$("input[name='test-element']").val("test").trigger("blur");

এবং ofc কেবলমাত্র তখনই উপলভ্য যখন আপনার প্রকল্পে জাভাস্ক্রিপ্ট পরিবর্তনের পুরো নিয়ন্ত্রণ রয়েছে।


2

ভাল, সেরা উপায় হ'ল আপনি নিজের দ্বারা তালিকাভুক্ত সেই তিনটি ঘাঁটিটি coverেকে রাখা। একটি সাধারণ: onblur,: onkeyup, ইত্যাদি আপনি যা চান তা কাজ করে না, তাই কেবল তাদের একত্র করুন।

কীআপ প্রথম দুটিটি আবরণ করা উচিত, এবং জাভাস্ক্রিপ্ট যদি ইনপুট বাক্সটি পরিবর্তন করে চলেছে তবে ভাল আমি নিশ্চিত এটি নিজের জাভাস্ক্রিপ্ট, তাই এটির পরিবর্তিত ফাংশনটিতে কেবল একটি কলব্যাক যুক্ত করুন।


1
সহজ সমাধানের জন্য +1, যদিও এটি সম্ভব ওপি পাঠ্যবাক্সে কোড পরিবর্তন করতে কোডটি সংশোধন করতে / করতে চায় না।
আনানাবেল

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

1

এখানে একটি কার্যকারী উদাহরণ যা আমি একটি স্বতঃপূর্ন প্রকরণটি বাস্তবায়নের জন্য ব্যবহার করছি একটি জ্যাকুয়েরুই নির্বাচককে (তালিকা) জনসাধারণ করে তোলে, তবে আমি চাই না যে এটি জ্যাকুরিউই স্বয়ংক্রিয়ভাবে সম্পূর্ণরূপে কাজ করবে যা একটি ড্রপ-ডাউন মেনু করে।

$("#tagFilter").on("change keyup paste", function() {
     var filterText = $("#tagFilter").val();
    $("#tags").empty();
    $.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
        function(data) {
            var i;
            for (i = 0; i < data.length; i++) {
                var tag = data[i].value;
                $("#tags").append("<li class=\"tag\">" + tag + "</li>");
            }
        }); 
});

1

কোন জ্যাকুয়েরি নেই! (আজকের দিনে এটি বেশ কয়েকবারই অচল হয়ে পড়েছে)

সম্পাদনা: আমি HTML ইভেন্টগুলি সরিয়েছি। এইচটিএমএল ইভেন্টগুলি ব্যবহার করবেন না ... পরিবর্তে জাভাস্ক্রিপ্ট ইভেন্ট শ্রোতাদের ব্যবহার করুন।

document.querySelector("#testInput").addEventListener("input", test);

function test(e) {
 var a = document.getElementById('output');
 var b = /^[ -~]+$/;
 if (e.target.value == '' || b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. Yes";
 } else if (!b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. No";
 }
}
Try pressing Alt+NumPad2+NumPad3 in the input, it will instantly detect a change, whether you Paste, Type, or any other means, rather than waiting for you to unselect the textbox for changes to detect.

<input id="testInput">
<br>
<a id="output">Text is Ascii?.. Yes</a>


0

আপনি কি ঠিক <span contenteditable="true" spellcheck="false">জায়গায় উপাদান ব্যবহার করতে পারবেন না <input type="text">?

<span>( contenteditable="true" spellcheck="false"বৈশিষ্ট্য হিসাবে) স্বতন্ত্র <input>কারণ মূলত:

  • এটি স্টাইলের মতো নয় <input>
  • এটির কোনও valueসম্পত্তি নেই তবে পাঠ্যটি innerTextএর অভ্যন্তরীণ অংশ হিসাবে রেন্ডার করা হয়েছে ।
  • এটি <input>বৈশিষ্ট্যটি নির্ধারণ করা হলেও এটি বহুমুখী নয় multiline="true"

উপস্থিতিটি সম্পাদন করতে আপনি অবশ্যই এটি সিএসএসে স্টাইল করুন, যেখানে মানটি লিখবেন innerText জন্য এটি একটি ইভেন্ট পেতে পারেন:

এখানে একটি ঝাঁকুনি

দুর্ভাগ্যক্রমে এমন কিছু আছে যা আসলে আইই এবং এজতে কাজ করে না, যা আমি খুঁজে পেতে অক্ষম।


আমি মনে করি যে এই পদ্ধতিটি ব্যবহারের চারপাশে অ্যাক্সেসযোগ্যতার উদ্বেগ রয়েছে।
ড্যানিয়েল টোনন

0

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

$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
    // Do something here
});

এই সমাধানটির সাথে একমাত্র সমস্যাটি হ'ল জাভাস্ক্রিপ্ট থেকে মানটি পরিবর্তন হলে এটি ট্রিগার করবে না $('selector').val('some value')। আপনি জাভাস্ক্রিপ্ট থেকে মান পরিবর্তন করার সময় আপনি যে কোনও ইভেন্টকে আপনার নির্বাচকের কাছে ফায়ার করতে পারেন।

$(selector).val('some value');
// fire event
$(selector).trigger('change');

-2

আপনি এই উদাহরণটি দেখতে এবং চয়ন করতে পারেন যে ইভেন্টগুলি আপনার আগ্রহী:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>evetns</title>
</head>
<body>
<form>
    <input class="controlevents" id="i1" type="text" /><br />
    <input class="controlevents" id="i2" type="text" /><br />
    <input class="controlevents" id="i3" type="text" /><br />
    <input class="controlevents" id="i4" type="text" /><br />
    <input class="controlevents" id="i5" type="text" /><br />
</form>
<div id="datatext"></div>
</body>
</html>
<script>
$(function(){

function testingevent(ev){
    if (ev.currentTarget.tagName=="INPUT")
        $("#datatext").append("<div>id : " + ev.currentTarget.id + ", tag: " + ev.currentTarget.tagName + ", type: "+ ev.type +"</div>");
}   

    var eventlist = ["resizeend","rowenter","dragleave","beforepaste","dragover","beforecopy","page","beforeactivate","beforeeditfocus","controlselect","blur",
                    "beforedeactivate","keydown","dragstart","scroll","propertychange","dragenter","rowsinserted","mouseup","contextmenu","beforeupdate",
                    "readystatechange","mouseenter","resize","copy","selectstart","move","dragend","rowexit","activate","focus","focusin","mouseover","cut",
                    "mousemove","focusout","filterchange","drop","blclick","rowsdelete","keypress","losecapture","deactivate","datasetchanged","dataavailable",
                    "afterupdate","mousewheel","keyup","movestart","mouseout","moveend","cellchange","layoutcomplete","help","errorupdate","mousedown","paste",
                    "mouseleave","click","drag","resizestart","datasetcomplete","beforecut","change","error","abort","load","select"];

    var inputs = $(".controlevents");

    $.each(eventlist, function(i, el){
        inputs.bind(el, testingevent);
    });

});
</script>

4
আমি মনে করি আপনি কোনও ইভেন্টের ধরন ভুলে গেছেন :)
ডাস্টিন বসওয়েল

-3

আমি এখানে পার্টিতে দেরি করতে পারি তবে আপনি কি jQuery সরবরাহ করে কেবল পরিবর্তন () ইভেন্টটি ব্যবহার করতে পারবেন না।

আপনার মতো কিছু করতে সক্ষম হওয়া উচিত ...

$(#CONTROLID).change(function(){
    do your stuff here ...
});

আপনি সর্বদা এমন কিছু দিয়ে নিয়ন্ত্রণের তালিকায় এটি বেঁধে রাখতে পারেন ...

var flds = $("input, textarea", window.document);

flds.live('change keyup', function() {
    do your code here ...
});

লাইভ বাইন্ডার নিশ্চিত করে যে পৃষ্ঠাতে এখন এবং ভবিষ্যতে বিদ্যমান সমস্ত উপাদানগুলি পরিচালনা করা হবে।


2
ফোকাস হারিয়ে যাওয়ার পরে পরিবর্তিত ইভেন্টটি কেবল আগুনে জ্বলে ওঠে, তাই কোনও ব্যবহারকারী বাক্সে টাইপ করার সময় এটি আগুনে যায় না, কেবল সেগুলি হয়ে যাওয়ার পরে এবং অন্য কিছু করার জন্য।
এলি স্যান্ড

2
অন্যান্য অনেক উত্তরের মতো এখানেও যখন জাভাস্ক্রিপ্ট থেকে উপাদানটির মান পরিবর্তন করা হবে তখন এটি কাজ করবে না। ওপি যে অন্য কোনও সংশোধনী মামলা মিস করেছে তা আমি মিস করি না জানি না।
মার্ক এমেরি

-4

এটি করার জন্য এটি দ্রুত এবং পরিষ্কার উপায়:

আমি Jquery -> ব্যবহার করছি

$('selector').on('change', function () {
    console.log(this.id+": "+ this.value);
});

এটা আমার জন্য বেশ ভাল কাজ করছে।


7
এটি ইতিমধ্যে পরামর্শ দেওয়া হয়েছে। এটি কেবল সহজ ক্ষেত্রে সম্বোধন করে, যখন ব্যবহারকারী পাঠ্যটি টাইপ করে।
ক্রিস্টোফ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.