জাভাস্ক্রিপ্ট পরিবর্তন ইভেন্ট ইনপুট উপাদান শুধুমাত্র ফোকাস হারাতে আগুন

Question 1

আমার একটি ইনপুট উপাদান রয়েছে এবং আমি বিষয়বস্তুর দৈর্ঘ্য পরীক্ষা করে চালিয়ে যেতে চাই এবং যখনই দৈর্ঘ্য একটি নির্দিষ্ট আকারের সমান হয়, আমি জমা বোতামটি সক্ষম করতে চাই, তবে জাভাস্ক্রিপ্টের উত্সাহিত ইভেন্টটিকে ইভেন্ট হিসাবে আমি একটি সমস্যার মুখোমুখি হয়েছি am কেবল তখনই আগুন লাগে যখন ইনপুট উপাদানটি সুযোগের বাইরে চলে যায় এবং যখন বিষয়বস্তু পরিবর্তন হয় না।

<input type="text" id="name" onchange="checkLength(this.value)" />

---- বিনিময়ে নামের বিষয়বস্তু পরিবর্তন করে না, তবে নাম ফোকাসের বাইরে চলে গেলে কেবল আগুন লাগে।

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

আমি এমন কিছু চাই যা ক্ষেত্রের সামগ্রীগুলি কীবোর্ডের মাধ্যমে বা মাউস দ্বারা পরিবর্তিত হয় ... কোনও ধারণা?

Question 2

(function () {
    var oldVal;

    $('#name').on('change textInput input', function () {
        var val = this.value;
        if (val !== oldVal) {
            oldVal = val;
            checkLength(val);
        }
    });
}());

এই ফেলবো change, কি-স্ট্রোক paste, textInput, input(যখন উপলব্ধ)। এবং প্রয়োজনের চেয়ে বেশি আগুন নয়।

http://jsfiddle.net/katspaugh/xqeDj/

তথ্যসূত্র:

textInput- একটি ডাব্লু 3 সি ডোম স্তর 3 ইভেন্টের ধরণ। http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

যখন এক বা একাধিক অক্ষর প্রবেশ করানো হয়েছে তখন কোনও ব্যবহারকারী এজেন্টকে অবশ্যই এই ইভেন্টটি প্রেরণ করতে হবে। এই অক্ষরগুলি বিভিন্ন উত্স থেকে উদ্ভূত হতে পারে, উদাহরণস্বরূপ, কোনও কী কীবোর্ড ডিভাইসে চাপলে বা ছেড়ে দেওয়া হয়, ইনপুট পদ্ধতি সম্পাদকের প্রসেসিং থেকে বা ভয়েস কমান্ডের ফলে দেখা যায় characters যেখানে একটি "পেস্ট" অপারেশন অক্ষরের একটি সাধারণ ক্রম উত্পন্ন করে, যেমন কোনও কাঠামো বা শৈলীর তথ্য ছাড়াই একটি পাঠ্য উত্তরণ, এই ইভেন্টের ধরণটিও উত্পন্ন করা উচিত।

input- একটি HTML5 ইভেন্টের ধরণ।

যখন ব্যবহারকারী মান পরিবর্তন করে তখন নিয়ন্ত্রণে ফায়ার করা হয়

ফায়ারফক্স, ক্রোম, আইই 9 এবং অন্যান্য আধুনিক ব্রাউজারগুলি এটি সমর্থন করে।

এই ইভেন্টটি পরিবর্তনের পরে অবিলম্বে ঘটেছিল, অন্বেষণ ইভেন্টের মতো নয় যা উপাদান ফোকাস হারিয়ে ফেললে ঘটে।

Question 3

ক্যাটস্পোর উত্তরের প্রতিরোধ হিসাবে, এখানে একটি CSS ক্লাস ব্যবহার করে একাধিক উপাদানগুলির জন্য এটি করার একটি উপায়।

   $('.myclass').each(function(){
        $(this).attr('oldval',$(this).val());
   });

   $('.myclass').on('change keypress paste focus textInput input',function(){
       var val = $(this).val();
       if(val != $(this).attr('oldval') ){
           $(this).attr('oldval',val); 
           checkLength($(this).val());
        }
    });

Question 4

এটি খুঁজে পেতে আমার 30 মিনিট সময় লেগেছে, তবে এটি 2019 সালের জুনে কাজ করছে।

<input type="text" id="myInput" oninput="myFunction()">

এবং আপনি যদি কোনও ইভেন্ট শ্রোতার সাথে js তে প্রোগ্রামগত যুক্ত করতে চান

inputElement.addEventListener("input", event => {})

Question 5

এটি jQuery উপায়ে করুন:

<input type="text" id="name" name="name"/>


$('#name').keyup(function() {
  alert('Content length has changed to: '+$(this).val().length);
});

Question 6

আপনি অনকিআপ ব্যবহার করতে পারেন

<input id="name" onkeyup="checkLength(this.value)" />

Question 7

আপনি প্রতিটি সম্ভাবনা ধরতে চাইলে আপনাকে onkeyupএবং onclick(বা onmouseup) এর সংমিশ্রণটি ব্যবহার করতে হবে ।

<input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />

Question 8

একই সমস্যার জন্য আমি বিকাশের জন্য আরও একটি সমাধান এখানে দিই। তবে আমি অনেক ইনপুট বাক্স ব্যবহার করি তাই আমি উপাদানগুলির নিজস্ব নির্ধারিত বৈশিষ্ট্য হিসাবে পুরানো মান রাখি: "ডেটা-মান"। JQuery ব্যবহার করে এটি পরিচালনা করা এত সহজ।

        $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) {
            var self = e.data.self;

            if (e.keyCode == 13) {
                e.preventDefault();
                $(this).attr('data-value', $(this).val());
                self.filterBy(this, true)
            }
            else if (e.keyCode == 27) {
                $(this).val('');
                $(this).attr('data-value', '');
                self.filterBy(this, true)
            }
            else {
                if ($(this).attr('data-value') != $(this).val()) {
                    $(this).attr('data-value', $(this).val());
                    self.filterBy(this);
                }
            }
        });

এখানে, আমি 5-6 ইনপুট বাক্সগুলিতে ক্লাসের 'ফিল্টারবক্স' ব্যবহার করেছি, আমি যদি ফিল্টারবাই পদ্ধতি চালিত করি তবেই ডেটা-মান তার নিজস্ব মানের থেকে আলাদা হয়।