আমি টাইপ / লেখা বন্ধ করার পরে কীভাবে ইনপুট পাঠ্যে কোনও ইভেন্ট ট্রিগার করব?

Question 1

আমি আমার ইনপুট পাঠ্যবক্সে অক্ষর (টাইপ করার সময় নয়) বন্ধ করা ঠিক করার পরেই একটি ইভেন্টটি ট্রিগার করতে চাই।

আমি চেষ্টা করেছি:

$('input#username').keypress(function() {
    var _this = $(this); // copy of this object for further usage

    setTimeout(function() {
        $.post('/ajax/fetch', {
            type: 'username',
            value: _this.val()
        }, function(data) {
            if(!data.success) {
                // continue working
            } else {
                // throw an error
            }
        }, 'json');
    }, 3000);
});

তবে এই উদাহরণটি প্রতিটি টাইপ করা অক্ষরের জন্য একটি সময়সীমা তৈরি করে এবং আমি যদি 20 টি অক্ষর টাইপ-ইন করি তবে আমি প্রায় 20 AJAX অনুরোধগুলি পাই।

এই কোলাহলটিতে আমি এজেএক্সের পরিবর্তে একটি সাধারণ সতর্কতা দিয়ে একই সমস্যাটি প্রদর্শন করি।

এর কোনও সমাধান আছে বা আমি কেবল এর জন্য একটি খারাপ দৃষ্টিভঙ্গি ব্যবহার করছি?

Question 2

আপনাকে একটি setTimeout(যেমন আপনি আছেন) ব্যবহার করতে হবে তবে রেফারেন্সটিও সংরক্ষণ করতে হবে যাতে আপনি সীমাটি পুনরায় সেট করতে পারেন। কিছুটা এইরকম:

//
// $('#element').donetyping(callback[, timeout=1000])
// Fires callback when a user has finished typing. This is determined by the time elapsed
// since the last keystroke and timeout parameter or the blur event--whichever comes first.
//   @callback: function to be called when even triggers
//   @timeout:  (default=1000) timeout, in ms, to to wait before triggering event if not
//              caused by blur.
// Requires jQuery 1.7+
//
;(function($){
    $.fn.extend({
        donetyping: function(callback,timeout){
            timeout = timeout || 1e3; // 1 second default timeout
            var timeoutReference,
                doneTyping = function(el){
                    if (!timeoutReference) return;
                    timeoutReference = null;
                    callback.call(el);
                };
            return this.each(function(i,el){
                var $el = $(el);
                // Chrome Fix (Use keyup over keypress to detect backspace)
                // thank you @palerdot
                $el.is(':input') && $el.on('keyup keypress paste',function(e){
                    // This catches the backspace button in chrome, but also prevents
                    // the event from triggering too preemptively. Without this line,
                    // using tab/shift+tab will make the focused element fire the callback.
                    if (e.type=='keyup' && e.keyCode!=8) return;
                    
                    // Check if timeout has been set. If it has, "reset" the clock and
                    // start over again.
                    if (timeoutReference) clearTimeout(timeoutReference);
                    timeoutReference = setTimeout(function(){
                        // if we made it here, our timeout has elapsed. Fire the
                        // callback
                        doneTyping(el);
                    }, timeout);
                }).on('blur',function(){
                    // If we can, fire the event since we're leaving the field
                    doneTyping(el);
                });
            });
        }
    });
})(jQuery);

$('#example').donetyping(function(){
  $('#example-output').text('Event last fired @ ' + (new Date().toUTCString()));
});

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

<input type="text" id="example" />
<p id="example-output">Nothing yet</p>

স্নিপেট প্রসারিত করুন

এটি কার্যকর করা হবে যখন:

সময়সীমা অতিক্রান্ত হয়েছে, বা
ব্যবহারকারী ক্ষেত্রগুলি ( blurইভেন্ট) স্যুইচ করেছেন

(যেটা আসে প্রথমে)

Question 3

সমাধান:

সমাধান এখানে। ব্যবহারকারী নির্দিষ্ট সময়ের জন্য টাইপ করা বন্ধ করে দেওয়ার পরে কোনও ফাংশন সম্পাদন করছে:

var delay = (function(){
  var timer = 0;
  return function(callback, ms){
  clearTimeout (timer);
  timer = setTimeout(callback, ms);
 };
})();

ব্যবহার

$('input').keyup(function() {
  delay(function(){
    alert('Hi, func called');
  }, 1000 );
});

Question 4

আপনি আন্ডারস্কোর.জেএস ব্যবহার করতে পারেন "ডিবাউন"

$('input#username').keypress( _.debounce( function(){<your ajax call here>}, 500 ) );

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

অতিরিক্ত তথ্যের জন্য, _.ডেবাউন্স (ফানক, টাইমার, ট্রু ) ব্যবহারের অর্থ হ'ল প্রথম ফাংশনটি কার্যকর হবে এবং পরবর্তী 500 মিমি টাইমার সহ সমস্ত অন্যান্য কীপ্রেস ইভেন্টগুলি উপেক্ষা করা হবে।

Question 5

আপনার আত্মপ্রকাশ দরকার!

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

Question 6

পরিষ্কার সমাধান:

$.fn.donetyping = function(callback, delay){
  delay || (delay = 1000);
  var timeoutReference;
  var doneTyping = function(elt){
    if (!timeoutReference) return;
    timeoutReference = null;
    callback(elt);
  };

  this.each(function(){
    var self = $(this);
    self.on('keyup',function(){
      if(timeoutReference) clearTimeout(timeoutReference);
      timeoutReference = setTimeout(function(){
        doneTyping(self);
      }, delay);
    }).on('blur',function(){
      doneTyping(self);
    });
  });

  return this;
};

Question 7

আপনার setTimeoutএকটি পরিবর্তনশীল বরাদ্দ করা উচিত এবং clearTimeoutএটি কীপ্রেসে সাফ করার জন্য ব্যবহার করা উচিত ।

var timer = '';

$('input#username').keypress(function() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    //Your code here
  }, 3000); //Waits for 3 seconds after last keypress to execute the above lines of code
});

ফিডল

আশাকরি এটা সাহায্য করবে.

Question 8

আমি তৈরি করেছি এমন কিছু সাধারণ প্লাগইন রয়েছে যা সুনির্দিষ্টভাবে করে। প্রস্তাবিত সমাধানের তুলনায় এর জন্য অনেক কম কোড দরকার এবং এটি খুব হালকা (, 0,6 কেবি)

প্রথমে আপনি যে Bidকোনও সময় হতে পারে তার চেয়ে বেশি বস্তু তৈরি করুন bumped। প্রতিটি ধাক্কা পরবর্তী প্রদত্ত পরিমাণের জন্য বিড কলব্যাক ফায়ার করতে বিলম্ব করবে ।

var searchBid = new Bid(function(inputValue){
    //your action when user will stop writing for 200ms. 
    yourSpecialAction(inputValue);
}, 200); //we set delay time of every bump to 200ms

যখন Bidঅবজেক্ট প্রস্তুত হয়, আমাদের bumpএটি একরকম করা দরকার । এর সাথে বাম্পিং সংযুক্ত করি keyup event।

$("input").keyup(function(){
    searchBid.bump( $(this).val() ); //parameters passed to bump will be accessable in Bid callback
});

এখানে যা ঘটে তা হ'ল:

প্রতিবার ব্যবহারকারী কী টিপুন, বিডটি পরবর্তী 200 মিমের জন্য 'বিলম্বিত' (বাম্পড) হয়। যদি 200 মিমি আবার 'বম্পড' বিচি ছাড়াই পাস করে তবে কলব্যাক বরখাস্ত করা হবে।

এছাড়াও, আপনার কাছে বিড বন্ধ করার জন্য 2 টি অতিরিক্ত ক্রিয়াকলাপ পাওয়া গেছে (যদি ব্যবহারকারী এসকে চাপ দেয় বা উদাহরণস্বরূপ বাইরের ইনপুটটিকে ক্লিক করে) এবং তত্ক্ষণাত সমাপ্ত এবং কলব্যাক ফায়ারিংয়ের জন্য (উদাহরণস্বরূপ যখন ব্যবহারকারী চাপুন কী চাপুন):

searchBid.stop();
searchBid.finish(valueToPass);

Question 9

আমি একটি সাধারণ এইচটিএমএল / জেএস কোড অনুসন্ধান করছি এবং আমি কোনও খুঁজে পেলাম না। তারপরে, আমি ব্যবহার করে নীচের কোডটি লিখেছি onkeyup="DelayedSubmission()"।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head><title>Submit after typing finished</title>
<script language="javascript" type="text/javascript">
function DelayedSubmission() {
    var date = new Date();
    initial_time = date.getTime();
    if (typeof setInverval_Variable == 'undefined') {
            setInverval_Variable = setInterval(DelayedSubmission_Check, 50);
    } 
}
function DelayedSubmission_Check() {
    var date = new Date();
    check_time = date.getTime();
    var limit_ms=check_time-initial_time;
    if (limit_ms > 800) { //Change value in milliseconds
        alert("insert your function"); //Insert your function
        clearInterval(setInverval_Variable);
        delete setInverval_Variable;
    }
}

</script>
</head>
<body>

<input type="search" onkeyup="DelayedSubmission()" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" />

</body>
</html>

Question 10

আপনি যখন কেবল একটি ঘড়ি পুনরায় সেট করতে চান তখন কেন এত কিছু করবেন?

var clockResetIndex = 0 ;
// this is the input we are tracking
var tarGetInput = $('input#username');

tarGetInput.on( 'keyup keypress paste' , ()=>{
    // reset any privious clock:
    if (clockResetIndex !== 0) clearTimeout(clockResetIndex);

    // set a new clock ( timeout )
    clockResetIndex = setTimeout(() => {
        // your code goes here :
        console.log( new Date() , tarGetInput.val())
    }, 1000);
});

আপনি যদি ওয়ার্ডপ্রেসে কাজ করে থাকেন তবে আপনাকে jQuery ব্লকের ভিতরে এই সমস্ত কোডটি মোড়ানো দরকার:

jQuery(document).ready(($) => {
    /**
     * @name 'navSearch' 
     * @version 1.0
     * Created on: 2018-08-28 17:59:31
     * GMT+0530 (India Standard Time)
     * @author : ...
     * @description ....
     */
        var clockResetIndex = 0 ;
        // this is the input we are tracking
        var tarGetInput = $('input#username');

        tarGetInput.on( 'keyup keypress paste' , ()=>{
            // reset any privious clock:
            if (clockResetIndex !== 0) clearTimeout(clockResetIndex);

            // set a new clock ( timeout )
            clockResetIndex = setTimeout(() => {
                // your code goes here :
                console.log( new Date() , tarGetInput.val())
            }, 1000);
        });
});

Question 11

<input>আপনার HTML এর মধ্যে onkeyup = "myFunction ()" বৈশিষ্ট্যটি ব্যবহার করুন ।

Question 12

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