जब उपयोगकर्ता कुंजी टाइप करने के बजाय टाइपिंग खत्म करता है तो जावास्क्रिप्ट फंक्शन रन करें?

463

जब उपयोगकर्ता ने टेक्स्ट बॉक्स में टाइपिंग पूरी कर ली है तो मैं एक अजाक्स अनुरोध ट्रिगर करना चाहता हूं। मैं नहीं चाहता कि यह हर बार उपयोगकर्ता को एक पत्र टाइप करने पर फ़ंक्शन चलाए, क्योंकि इससे एओएक्स ऐजैक्स अनुरोधों का परिणाम होगा, हालांकि मैं नहीं चाहता कि उन्हें एंटर बटन भी हिट करना पड़े।

क्या कोई ऐसा तरीका है जिससे मैं यह पता लगा सकता हूं कि उपयोगकर्ता ने टाइप करना कब समाप्त किया है और फिर ajax अनुरोध करता है?

यहाँ jQuery का उपयोग कर! डेव

javascript  jquery  keyboard 
— डेविड Zorychta
स्रोत
21
मुझे लगता है कि आपको हमारे लिए "फिनिश टाइपिंग" को परिभाषित करने की आवश्यकता होगी।
— असली सपने १२
8
हालांकि @Surreal ड्रीम्स का उत्तर आपकी अधिकांश आवश्यकताओं को पूरा करता है, यदि उपयोगकर्ता फिर से टाइप करना शुरू कर देता है, तो निर्दिष्ट अनुरोधों को सर्वर पर भेजा जाएगा। नीचे मेरा जवाब देखें जो प्रत्येक XHR अनुरोध को एक चर में संग्रहीत करता है और एक नया बंद करने से पहले इसे रद्द कर देता है। यह वास्तव में Google अपनी त्वरित खोज में क्या करता है ।
— मार्को
1
— सीएमएस
1
कलंक के बारे में क्या? मुझे लगता है कि इनपुट तत्व के खो जाने पर उपयोगकर्ता ने निश्चित रूप से टाइपिंग समाप्त कर दी है।
— डॉन पी
3
एक साधारण Google खोज आपको सरल उत्तर दे सकती है: schier.co/blog/2014/12/08/…
— Cannicide

जवाबों:

687

इसलिए, मैं अंदाजा लगाता हूं कि टाइपिंग खत्म होने का मतलब है कि आप कुछ समय के लिए रुकें, 5 सेकंड बोलें। तो उस के साथ दिमाग में, एक टाइमर शुरू करते हैं जब उपयोगकर्ता एक कुंजी जारी करता है और जब वे एक दबाते हैं तो इसे साफ कर देते हैं। मैंने तय किया कि प्रश्न में इनपुट #myInput होगा।

कुछ धारणाएँ बनाते हुए ...

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}
— अवास्तविक सपने
स्रोत
4
धन्यवाद :) मैंने सवाल पर अपनी टिप्पणी टाइप करना शुरू कर दिया और महसूस किया कि मेरे पास एक अच्छा विचार है।
— ड्रीम्स
26
यह उत्तर सही ढंग से काम नहीं करता है, यह हमेशा 5 सेकंड के बाद फायर करेगा जब तक कि उपयोगकर्ता बहुत धीरे-धीरे टाइप न करें। नीचे काम कर समाधान देखें।
— रात
3
यदि आप यहां परेशानी में हैं, क्योंकि टाइमर तुरंत आग लगाता है, तो फ़ंक्शन कॉल के आसपास उद्धरण जोड़ने का प्रयास करें: setTimeout ('functionToBeCalled', doTypingInterval);
— लार्गो
3
मैं कुछ टिप्पणियां देख रहा हूं, जहां doneTypingउदाहरण में , कॉलबैक फ़ंक्शन तुरंत चल रहा है। यह आमतौर पर गलती ()से फ़ंक्शन नाम के बाद शामिल है । ध्यान दें कि इसे setTimeout(doneTyping,नहीं पढ़ना चाहिएsetTimeout(doneTyping(),
— एंथनी डायसांटी
2
@ जेसिका को पेस्ट के साथ काम करने के लिए आपको 'पेस्ट' इवेंट को इस तरह जोड़ना होगा: ऑन ('कीप पेस्ट',
— सेर्गेई
397

ऊपर चुना गया जवाब काम नहीं करता है।

क्योंकि टाइपिंग करने वाला समसामयिक कई बार सेट किया जाता है (कीपैड तेजी से टाइपर्स आदि के लिए ट्रिगर होने से पहले दो बार दबाया जाता है) तो यह ठीक से स्पष्ट नहीं होता है।

नीचे दिया गया समाधान इस समस्या को हल करता है और ओपी के अनुरोध के अनुसार समाप्त होने के बाद एक्स सेकंड कॉल करेगा। इसके लिए अब अतिरेक कीडाउन फ़ंक्शन की आवश्यकता नहीं है। मैंने एक चेक भी जोड़ा है ताकि यदि आपका इनपुट खाली हो तो आपका फ़ंक्शन कॉल नहीं होगा।

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on keyup, start the countdown
$('#myInput').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#myInput').val()) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

और वैनिला जावास्क्रिप्ट समाधान में एक ही कोड:

//setup before functions
let typingTimer;                //timer identifier
let doneTypingInterval = 5000;  //time in ms (5 seconds)
let myInput = document.getElementById('myInput');

//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    if (myInput.value) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

यह समाधान ईएस 6 का उपयोग करता है लेकिन यह यहां आवश्यक नहीं है। बस एक नियमित फ़ंक्शन के letसाथ varऔर तीर फ़ंक्शन को बदलें ।

— जा रहा
स्रोत
5
खैर, इनपुट खाली होने पर भी फ़ंक्शन को कॉल करना उपयोगी हो सकता है। क्या होगा यदि आप इनपुट को फिर से खाली करने पर कुछ खोज परिणाम (उदाहरण के लिए) साफ़ करना चाहते हैं?
— rvighne
7
मुझे लगता है कि हमें उस स्थिति पर भी विचार करना चाहिए जहां उपयोगकर्ता केवल चिपकाता है क्षेत्र के अंदर स्ट्रिंग।
— विशाल नायर
10
का उपयोग $('#myInput').on('input', function() {करता है, तो आप कॉपी और पेस्ट के साथ काम करने के लिए इस चाहते हैं। यदि इनपुट खाली है तो मुझे चेक का बिंदु दिखाई नहीं देता है। यह मानते हुए कि वह जो टाइप करता है, उसे मिटाना चाहता है, अजाक्स कॉल करने में विफल हो जाएगा।
— 5
3
if ($('#myInput').val)इसके बजाय क्यों है if ($('#myInput').val())? .valएक समारोह होना चाहिए ?
— wlnirvana
4
$ (यह) .val () का उपयोग क्यों नहीं करते?
— जोएलफैन
76

यह अंडरस्कोर के साथ केवल एक लाइन है। जेएस डेब्यू फंक्शन:

$('#my-input-box').keyup(_.debounce(doSomething , 500));

यह मूल रूप से doSomething 500 मिलीसेकंड के बाद कहता है कि मैं टाइप करना बंद कर देता हूं।

अधिक जानकारी के लिए: http://underscorejs.org/#debounce

— bit2pixel
स्रोत
5
JQuery के लिए भी उपलब्ध लगता है: code.google.com/p/jquery-debounce और github.com/diaspora/jquery-debounce
— koppor
63
यह मुझे आश्चर्यचकित करता है कि कैसे लोग "वन लाइन ऑफ़ कॉडी" को गंभीर रूप से महत्वपूर्ण मानते हैं। महान। कोड की एक लाइन जिसे लोड करने के लिए 1.1k JS फाइल की आवश्यकता होती है। मैं इसका हल नहीं निकाल रहा क्योंकि यह एक समाधान है। लेकिन एक पंक्ति बोल्ड चीज़ मुझे परेशान करती है और साथ ही ब्लोट कोड के लिए अग्रणी होती है।
— वोल्फि
1
@Wolfie, मैं कोड ब्लोट के बारे में आपसे सहमत हूँ लेकिन अंडरस्कोर और Lodash शीर्ष दो निर्भर-पर उपयोगिताओं पर हैं NPM तो यह कई लोगों के लिए एक पंक्ति समाधान हो सकता है।
— पॉल
3
@ पाओल मैं सहमत हूं कि यदि आप अन्य उद्देश्यों के लिए पुस्तकालयों को लोड कर रहे हैं, तो इसका ठीक और वास्तव में सामान्य कोड का उपयोग करने के लिए फायदेमंद है। लेकिन एक लाइन के उद्देश्य के लिए कोड के K पर लोड करना कुशल नहीं है। विशेष रूप से मोबाइल प्लेटफ़ॉर्म कम और कम असीमित डेटा के साथ। और कई यूरो क्षेत्र भी डेटा द्वारा इंटरनेट के लिए भुगतान करते हैं। तो यह करने के लिए उचित जब ब्लोट पर ध्यान देना अच्छा है।
— वोल्फ
मुझे क्यों मिला:Uncaught ReferenceError: _ is not defined
— Wilf
44

हां, आप प्रत्येक और प्रत्येक कुंजी अप इवेंट पर 2 सेकंड का टाइमआउट सेट कर सकते हैं, जो कि अजाक्स अनुरोध को आग लगा देगा। आप एक्सएचआर विधि को भी स्टोर कर सकते हैं और बाद की प्रमुख प्रेस घटनाओं पर इसे समाप्त कर सकते हैं ताकि आप बैंडविथ को और भी अधिक बचा सकें। यहाँ पर मैंने कुछ लिखा है जो मेरे लिए एक स्वत: पूर्ण स्क्रिप्ट है।

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

उम्मीद है की यह मदद करेगा,

मार्को

— मार्को
स्रोत
मुझे इसकी सिफारिश नहीं करनी है। प्रत्येक बार कुंजी दबाने पर कोड एक एपीआई अनुरोध को ट्रिगर करता है। फिर यह अनुरोध को रद्द कर देता है यदि कोई अन्य कुंजी दबाया जाता है। भले ही यह समाधान उपयोगकर्ता प्रकारों के दौरान AJAX कॉलबैक को ट्रिगर करने से रोकता है, यह अभी भी सर्वर को अनुरोधों के साथ हथौड़ा देगा।
— lxg
Ixg, नहीं, यह नहीं होगा। ClearTimeout फ़ंक्शन वह पिछली टाइमआउट घटनाओं को साफ़ करता है, इसके बाद API कॉल को लागू करता है।
— जॉन स्मिथ
@ जॉनसन, मैं असहमत हूं कि पहले टाइमर को साफ करना बेहतर होगा, फिर जांचें कि क्या xhr खाली है या आपकी स्थिति
— कैसी
19 
var timer;
var timeout = 1000;

$('#in').keyup(function(){
    clearTimeout(timer);
    if ($('#in').val) {
        timer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, timeout);
    }
});

पूरा उदाहरण यहाँ: http://jsfiddle.net/ZYXp4/8/

— azzy81
स्रोत
यह मेरे लिए काम कर रहा है, हालांकि ध्यान रखें कि जब उपयोगकर्ता टेक्स्ट बॉक्स से बाहर निकलता है तो आपको कीप इवेंट नहीं मिलेगा क्योंकि यह उस बिंदु से ध्यान खो चुका है। बजाय समस्या को हल करने के लिए यह करने के लिए इसे सेट करने लगता है।
— होरतिस --३
12

दोनों शीर्ष 2 उत्तर मेरे लिए काम नहीं करते हैं। तो, यहाँ मेरा समाधान है:

var timeout = null;

$('#myInput').keyup(function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        //do stuff here
    }, 500);
});
— YSFKBDY
स्रोत
11

मुझे Surreal ड्रीम का जवाब पसंद है लेकिन मैंने पाया कि मेरा "किया हुआ" फ़ंक्शन हर कीपर के लिए फायर करेगा, यदि आप "हेलो" टाइप करते हैं तो वास्तव में जल्दी से; टाइपिंग बंद करने के बाद सिर्फ एक बार फायर करने के बजाय, फ़ंक्शन 5 बार फायर करेगा।

समस्या यह थी कि जावास्क्रिप्ट सेटटाइमआउट फ़ंक्शन सेट किए गए किसी भी पुराने टाइमआउट को अधिलेखित या मारने के लिए प्रकट नहीं होता है, लेकिन यदि आप इसे स्वयं करते हैं तो यह काम करता है! इसलिए मैंने टाइपटाइमिम सेट होने पर सेटटाइम से ठीक पहले एक क्लियरटाइम कॉल को जोड़ा। निचे देखो:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').on("keyup", function(){
    if (typingTimer) clearTimeout(typingTimer);                 // Clear if already set     
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#myInput').on("keydown", function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

NB मुझे यह पसंद आया होगा कि यह सिर्फ Surreal ड्रीम के उत्तर के लिए एक टिप्पणी के रूप में जोड़ा गया था, लेकिन मैं एक नया उपयोगकर्ता हूं और इसके पास पर्याप्त प्रतिष्ठा नहीं है। माफ़ करना!

— लियाम फलागन
स्रोत
10

पेस्ट जैसे अतिरिक्त मामलों को संभालने के लिए स्वीकृत उत्तर को संशोधित करना:

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 2 second for example
var $input = $('#myInput');

// updated events 
$input.on('input propertychange paste', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);      
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}
— Jecoms
स्रोत
6

मुझे नहीं लगता कि इस मामले में कीडाउन घटना आवश्यक है (कृपया मुझे बताएं कि अगर मैं गलत हूं तो) क्यों। मेरी (गैर- jquery) स्क्रिप्ट में समान समाधान दिखता है:

var _timer, _timeOut = 2000; 



function _onKeyUp(e) {
    clearTimeout(_timer);
    if (e.keyCode == 13) {      // close on ENTER key
        _onCloseClick();
    } else {                    // send xhr requests
        _timer = window.setTimeout(function() {
            _onInputChange();
        }, _timeOut)
    }

}

यह स्टैक ओवरफ्लो पर मेरा पहला जवाब है, इसलिए मुझे उम्मीद है कि यह किसी दिन मदद करता है :)

— रफाल पास्तुज़क
स्रोत
6

निम्नलिखित delayफ़ंक्शन की घोषणा करें :

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

और फिर इसका उपयोग करें:

let $filter = $('#item-filter');
$filter.on('keydown', function () {
    delay(function () {            
        console.log('this will hit, once user has not typed for 1 second');            
    }, 1000);
});
— फेबियन बिगलर
स्रोत
आपका समाधान शानदार है, भाई!
— डेवलपर
1
@Developer बहुत बहुत धन्यवाद। मैंने थोड़ा और जटिल परिदृश्य (प्रति पृष्ठ एकाधिक नियंत्रण) हल करने के लिए एक और उत्तर भी जोड़ा है।
— फेबियन बिगलर
अच्छा समाधान। Im यह प्रयोग कर रहा हूँ, लेकिन 'इनपुट' ईवेंट का उपयोग करते हुए
— कीडाउन
कीप इवेंट के साथ, इसने मेरे लिए बहुत अच्छा काम किया। धन्यवाद।
— सिनान एल्डेम
6

देर से जवाब लेकिन मैं इसे जोड़ रहा हूं क्योंकि यह 2019 है और यह पूरी तरह से सुंदर है ES6, कोई तीसरे पक्ष के पुस्तकालयों का उपयोग करके, और मुझे लगता है कि अधिकांश उच्च श्रेणी के उत्तर भारी हैं और बहुत सारे चर के साथ तौले गए हैं।

इस उत्कृष्ट ब्लॉग पोस्ट से लिया गया सुरुचिपूर्ण समाधान ।

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      const context = this;
      clearTimeout(timeout);
      timeout = setTimeout(() => callback.apply(context, args), wait);
  };
}

window.addEventListener('keyup', debounce( () => {
    // code you would like to run 1000ms after the keyup event has stopped firing
    // further keyup events reset the timer, as expected
}, 1000))
— GrayedFox
स्रोत
1
यह वास्तव में वर्ष को देखते हुए शीर्ष उत्तर होना चाहिए
— डार्क हिप्पो
4

ठीक है, कड़ाई से नहीं बोल रहा है, क्योंकि उपयोगकर्ता अनुमान लगा सकता है कि कंप्यूटर कब टाइप कर रहा है। आप निश्चित रूप से कुंजी पर एक टाइमर आग लगा सकते हैं, और इसे हर बाद की कुंजी पर रीसेट कर सकते हैं। यदि टाइमर समाप्त हो जाता है, तो उपयोगकर्ता ने टाइमर अवधि के लिए टाइप नहीं किया है - आप "समाप्त टाइपिंग" कह सकते हैं।

यदि आप उम्मीद करते हैं कि उपयोगकर्ता टाइप करते समय रुकेंगे, तो यह पता करने का कोई तरीका नहीं है कि उन्हें कब किया जाए।

(निश्चित रूप से आप डेटा से बता सकते हैं कि वे कब किए गए हैं)

— sleske
स्रोत
3

मुझे लगता है कि inputघटना के साथ समाधान कुछ सरल है :

var typingTimer;
var doneTypingInterval = 500;

$("#myInput").on("input", function () {
    window.clearTimeout(typingTimer);
    typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});

function doneTyping () {
    // code here
}
— एड्रियन ब्रुनेलैट
स्रोत
3

@ जाने के उत्तर से सहमत हैं। इसी तरह का एक और समाधान जो मेरे लिए काम करता है, वह नीचे है। एकमात्र अंतर यह है कि मैं की-अप के बजाय .on ("इनपुट" ...) का उपयोग कर रहा हूं। यह केवल इनपुट में परिवर्तन को कैप्चर करता है। अन्य कुंजी जैसे कि Ctrl, Shift आदि को अनदेखा किया जाता है

var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on input change, start the countdown

$('#myInput').on("input", function() {    
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function(){
        // doSomething...
    }, doneTypingInterval);
});
— Grace.io
स्रोत
3

मैंने टाइपिंग समाप्त करने के लिए उपयोगकर्ता के लिए प्रतीक्षा करने के लिए बस एक सरल कोड निकाला है:

चरण 1.सेट समय को शून्य करने के लिए तब उपयोगकर्ता को टाइप करते समय वर्तमान समय समाप्त हो जाता है।

चरण 2. कुंजीर इवेंट ट्रिगर होने से पहले चर को स्पष्ट समयबाह्य परिभाषित करें।

चरण 3. ऊपर घोषित चर के लिए समय-सीमा;

<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>

जावास्क्रिप्ट कोड

var textInput = document.getElementById('input');
var textdata = document.querySelector('.data');
// Init a timeout variable to be used below
var timefired = null;

// Listen for keystroke events
// Init a timeout variable to be used below
var timefired = null;// Listen for keystroke events
textInput.onkeyup = function (event) {
clearTimeout(timefired);
timefired = setTimeout(function () {
    textdata.innerHTML = 'Input Value:'+ textInput.value;
  }, 600);
};
— नेविल शाऊल ब्लेमस
स्रोत
1
प्रश्न पहले ही उत्तर दिया जा चुका है ... और यह इस के समान है
— मिक्सोन
3

मैं अपनी सूची में खोज को लागू कर रहा था और इसे अजाक्स आधारित होना चाहिए। इसका मतलब है कि हर महत्वपूर्ण परिवर्तन पर, खोज परिणामों को अद्यतन और प्रदर्शित किया जाना चाहिए। इससे सर्वर पर भेजे गए कई अजाक्स कॉल आते हैं, जो अच्छी बात नहीं है।

कुछ काम करने के बाद, मैंने सर्वर को पिंग करने के लिए एक दृष्टिकोण बनाया जब उपयोगकर्ता टाइप करना बंद कर देता है।

इस समाधान ने मेरे लिए काम किया:

$(document).ready(function() {
    $('#yourtextfield').keyup(function() {
        s = $('#yourtextfield').val();
        setTimeout(function() { 
            if($('#yourtextfield').val() == s){ // Check the value searched is the latest one or not. This will help in making the ajax call work when client stops writing.
                $.ajax({
                    type: "POST",
                    url: "yoururl",
                    data: 'search=' + s,
                    cache: false,
                    beforeSend: function() {
                       // loading image
                    },
                    success: function(data) {
                        // Your response will come here
                    }
                })
            }
        }, 1000); // 1 sec delay to check.
    }); // End of  keyup function
}); // End of document.ready

आप देखेंगे कि इसे लागू करते समय किसी भी टाइमर का उपयोग करने की आवश्यकता नहीं है।

— अता उल मुस्तफा
स्रोत
2

यह एक सरल JS कोड मैंने लिखा है:

<!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>
— अल्फ्रेडो भाषाविद् जूनियर
स्रोत
1

जब टेक्स्टबॉक्स फ़ोकस खोता है तो आप ऑनब्लूर इवेंट का उपयोग कर सकते हैं: https://developer.mozilla.org/en/DOM/element.onblur

यह "टाइप करना बंद कर देता है" के समान नहीं है, अगर आप उस मामले की परवाह करते हैं जहां उपयोगकर्ता सामान का एक गुच्छा टाइप करता है और फिर टेक्स्टबॉक्स के साथ वहां बैठता है फिर भी ध्यान केंद्रित किया जाता है।

इसके लिए मैं ऑनक्लिक ईवेंट में एक सेट टाइमआउट बांधने का सुझाव दूंगा, और यह मानकर कि बिना कीस्ट्रोक्स के एक्स राशि के बाद, उपयोगकर्ता ने टाइप करना बंद कर दिया है।

— माइक रूहलिन
स्रोत
1

सिर्फ onfocusout का उपयोग क्यों न करें?

https://www.w3schools.com/jsreF/event_onfocusout.asp

यदि यह एक रूप है, तो वे हमेशा सबमिट बटन पर क्लिक करने के लिए हर इनपुट क्षेत्र का ध्यान केंद्रित करेंगे ताकि आपको पता चले कि इसके ऑनफोकस इवेंट ईवेंट हैंडलर को प्राप्त करने में कोई इनपुट नहीं छूटेगा।

— coffeeeee
स्रोत
1
जब सवाल पूछा गया था (अब से लगभग 7 साल पहले) onfocusout को खराब समर्थन मिला था, और onfocusout के साथ प्रभाव भी कुछ अलग होगा। आपको उपयोगकर्ता को तत्व पर ध्यान केंद्रित करने के लिए इंतजार करना होगा जबकि टाइमआउट / डेबिट समाधान के साथ जैसे ही उपयोगकर्ता टाइप करना बंद कर देता है और उपयोगकर्ता को फोकस स्विच करने की आवश्यकता नहीं होती है। उपयोग का उदाहरण उदाहरण उन पंजीकरण रूपों में से एक होगा जहां उपयोगकर्ता संभावित उपयोगकर्ता नाम के साथ एक चेकमार्क दर्ज करना बंद कर देता है या "X" फॉर्म फ़ील्ड के दाईं ओर प्रदर्शित होता है जो यह बताता है कि नाम उपलब्ध है।
— डेविड Zorychta
यदि खोज बार फ़ोकस पर है, तो किसी को भी बाहर आने की ज़रूरत नहीं है, कुछ समय बाद परिणाम सीधे दिखाया जाएगा क्योंकि कोई भी ओपन टाइप नहीं कर रहा है
— P Satish Patro
1

यदि उपयोगकर्ता को क्षेत्र से दूर जाने की आवश्यकता है, तो हम जावास्क्रिप्ट में Onchange के बजाय "onBlur" का उपयोग कर सकते हैं

  <TextField id="outlined-basic"  variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />

यदि यह आवश्यक नहीं है तो टाइमर अच्छा विकल्प होगा।

— जयभारती पलानीसामी
स्रोत
0

एक बार जब आप टेक्स्ट बॉक्स पर फोकस का पता लगा लेते हैं, तो कुंजी समय-समय पर चेकआउट करते हैं, और हर बार ट्रिगर होने पर इसे रीसेट करते हैं।

जब समय समाप्त हो जाता है, तो अपने ajax अनुरोध करें।

— ocodo
स्रोत
0

यदि आप एक विशिष्ट लंबाई (जैसे ज़िपकोड फ़ील्ड) की तलाश में हैं:

$("input").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
        //make ajax request here after.
    }
  });
— जेसन
स्रोत
अजाक्स अनुरोध भेजने से पहले सीमित सत्यापन करने के लिए एक बुरा विचार नहीं है।
— चिम
0

यकीन नहीं होता कि मेरी ज़रूरतें सिर्फ अजीब हैं, लेकिन मुझे इसके समान कुछ चाहिए था और यही मैंने इस्तेमाल किया।

$('input.update').bind('sync', function() {
    clearTimeout($(this).data('timer'));            
    $.post($(this).attr('data-url'), {value: $(this).val()}, function(x) {
        if(x.success != true) {
            triggerError(x.message);    
        }
    }, 'json');
}).keyup(function() {
    clearTimeout($(this).data('timer'));
    var val = $.trim($(this).val());
    if(val) {
        var $this = $(this);
        var timer = setTimeout(function() {
            $this.trigger('sync');
        }, 2000);
        $(this).data('timer', timer);
    }
}).blur(function() {
    clearTimeout($(this).data('timer'));     
    $(this).trigger('sync');
});

जो मुझे अपने आवेदन में इस तरह के तत्व रखने की अनुमति देता है:

<input type="text" data-url="/controller/action/" class="update">

जब उपयोगकर्ता "टाइपिंग" (2 सेकंड के लिए कोई क्रिया नहीं) या किसी अन्य फ़ील्ड पर जाता है (जो तत्व से बाहर हो जाता है) अपडेट हो जाता है

— पाओलो बर्गेंटिनो
स्रोत
0

यदि आपको प्रतीक्षा करना आवश्यक है, जब तक कि उपयोगकर्ता टाइपिंग के साथ समाप्त न हो जाए, यह सरल है:

$(document).on('change','#PageSize', function () {
    //Do something after new value in #PageSize       
});

अजाक्स कॉल के साथ पूरा उदाहरण - यह मेरे पेजर के लिए काम कर रहा है - प्रति सूची आइटम की गिनती:

$(document).ready(function () {
    $(document).on('change','#PageSize', function (e) {
        e.preventDefault();
        var page = 1;
        var pagesize = $("#PageSize").val();
        var q = $("#q").val();
        $.ajax({
            url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })',
            data: { q: q, pagesize: pagesize, page: page },
            type: 'post',
            datatype: "json",
            success: function (data) {
                $('#tablecontainer').html(data);
               // toastr.success('Pager has been changed', "Success!");
            },
            error: function (jqXHR, exception) {
                ShowErrorMessage(jqXHR, exception);
            }
        });  
    });
});
— मिरोस्लाव सिस्का
स्रोत
0

प्रति पृष्ठ कई टाइमर

अन्य सभी उत्तर केवल एक नियंत्रण के लिए काम करते हैं ( मेरे अन्य उत्तर शामिल हैं)। यदि आपके पास प्रति पृष्ठ (जैसे खरीदारी की टोकरी में) कई नियंत्रण हैं तो केवल अंतिम नियंत्रण जहां उपयोगकर्ता टाइप किया गया कुछ कहलाएगा । मेरे मामले में यह निश्चित रूप से कामना व्यवहार नहीं है - प्रत्येक नियंत्रण का अपना टाइमर होना चाहिए।

इसे हल करने के लिए, आपको बस फ़ंक्शन के लिए एक आईडी पास करना होगा और निम्नलिखित कोड के रूप में टाइमआउटहैंडल्स शब्दकोश बनाए रखना होगा:

घोषणा

var delayUserInput = (function () {
    var timeoutHandles = {};    
    return function (id, callback, ms) {        
        if (timeoutHandles[id]) {
            clearTimeout(timeoutHandles[id]);
        }

        timeoutHandles[id] = setTimeout(callback, ms);             
    };
})();

समारोह उपयोग:

  delayUserInput('yourID', function () {
     //do some stuff
  }, 1000);
— फेबियन बिगलर
स्रोत
0

सरल और समझने में आसान।

var mySearchTimeout;
$('#ctl00_mainContent_CaseSearch').keyup(function () {
   clearTimeout(mySearchTimeout);
   var filter = $(this).val();
   mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700);
   return true;
});
— Juls
स्रोत
0

ES6 सिंटैक्स के साथ अपने फ़ंक्शन के लिए पैरामीटर पारित करने के लिए।

$(document).ready(() => {
    let timer = null;
     $('.classSelector').keydown(() => {
     clearTimeout(timer); 
     timer = setTimeout(() => foo('params'), 500);
  });
});

const foo = (params) => {
  console.log(`In foo ${params}`);
}
— अजिंक्य
स्रोत
-2

वाह, 3 टिप्पणियाँ भी बहुत सही हैं!

  1. खाली इनपुट फ़ंक्शन कॉल को छोड़ने का एक कारण नहीं है, जैसे मैं रीडायरेक्ट से पहले url से अपशिष्ट पैरामीटर हटाता हूं

  2. .on ('input', function() { ... });ट्रिगर करने के लिए इस्तेमाल किया जाना चाहिए keyup, pasteऔर changeघटनाओं

  3. निश्चित रूप से .val()या .valueइस्तेमाल किया जाना चाहिए

  4. आप कई इनपुट के साथ काम करने के $(this)बजाय ईवेंट फ़ंक्शन के अंदर उपयोग कर सकते हैं#id

  5. (मेरा निर्णय) मैं के बजाय अज्ञात फ़ंक्शन का उपयोग doneTypingमें setTimeoutआसानी से उपयोग करने के लिए $(this)n.4 से है, लेकिन आप पहले की तरह यह बचाने की जरूरत हैvar $currentInput = $(this);

EDIT मैं देखता हूं कि कुछ लोग तैयार कोड को कॉपी-पेस्ट करने की संभावना के बिना निर्देशों को नहीं समझते हैं। यहाँ तुम हो

var typingTimer;
//                  2
$("#myinput").on('input', function () {
    //             4     3
    var input = $(this).val();
    clearTimeout(typingTimer);
    //                           5
    typingTimer = setTimeout(function() {
        // do something with input
        alert(input);
    }, 5000);      
});
— vladkras
स्रोत
यह सवाल का जवाब कैसे देता है?
— थॉमस ऑरलिटा
@ThomasOrlita इस उत्तर में 3 सर्वाधिक मूल्यांकित उत्तर दिए गए हैं। स्वीकार किए गए एक पर एक नज़र डालें: 1. यह समर्थन नहीं करता है paste, यह उपयोग नहीं करता है this, आदि (मुझे लगता है कि यह महत्वपूर्ण है लेकिन मैं टिप्पणियों के टन में
— खोना
1
इस सवाल का जवाब नहीं है। यदि आप किसी अन्य उत्तर के बारे में टिप्पणी करना चाहते हैं, तो एक टिप्पणी प्रणाली है (मैं इसे अभी उपयोग कर रहा हूं!)
— ग्रेडफ़ॉक्स
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.