जावास्क्रिप्ट: जब उपयोगकर्ता ने

Question

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

तो बुनियादी तौर पर मैं liek इस

function KeyUpEvent() 
{ 
    if (user is still typing) 
    return; 
    else 
    //do processing 
} 

कुछ यह बहुत अच्छा होगा अगर समाधान सादे से आ सकता है चाहता हूँ जावास्क्रिप्ट या mootools। मैं किसी अन्य पुस्तकालय का उपयोग नहीं करना चाहता।

Answer 1

आमतौर पर जिस तरह से किया जाता है वह keyup ईवेंट पर टाइमर को पुनरारंभ करके होता है। कुछ ऐसा:

var keyupTimer; 
function keyUpEvent(){ 
    clearTimeout(keyupTimer); 
    keyupTimer = setTimeout(sendInput,1000); // will activate when the user has stopped typing for 1 second 
} 

function sendInput(){ 
    alert("Do AJAX request"); 
} 

Answer 2

असल में, आप कीप पर टाइमर शुरू करना चाहते हैं, और जब कीप फिर से शुरू होता है, टाइमर रीसेट करें। जब उपयोगकर्ता टाइपिंग बंद कर देता है, टाइमर समाप्त हो जाता है, और आपका अनुरोध उस बिंदु पर जा सकता है।

उदाहरण:

var timout_id; 

function keyup_handler(event) { 
    if (timout_id) { 
    clearTimeout(timout_id); 
    } 

    timout_id = setTimeout(function(){ 
    alert('sending data: \n' + event.target.value) 
    }, 800); 
} 

सिर्फ अपने पसंदीदा तरीका का उपयोग करने के समारोह देते हैं, और अपना पसंदीदा कार्रवाई के साथ alert बदलें।

बेशक आप इस दृष्टिकोण को सामान्यीकृत कर सकते हैं और इसे अधिक पुन: प्रयोज्य बना सकते हैं, लेकिन मुझे लगता है कि यह मूल विचार को दर्शाता है।

Answer 3

आप कभी नहीं जानते कि उपयोगकर्ता वास्तव में "समाप्त" टाइपिंग कब होता है। उपयोगकर्ता एक छींक तोड़ सकता है, या एक खिंचाव तोड़ सकता है, या एक कॉफी तोड़, और फिर टाइपिंग जारी रखें।

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

Answer 4

ऑनब्लूर और शायद ऑन-ऑनडाउन का उपयोग करें ताकि उपयोगकर्ता वापसी/एंटर कुंजी दबाए।

Answer 5

मैं हमेशा, एक टाइमर, कि एक कॉलबैक फ़ंक्शन को सक्रिय कर देगा संभाल करने के बाद उपयोगकर्ता के लिए समय की एक निर्धारित राशि के लिए टाइपिंग बंद कर दिया है इस सरल समारोह का उपयोग करें:

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

उपयोग (MooTools साथ उदाहरण):

$('textInput').addEvent('keyup', function(e){ 
    typewatch(function() { 
    // executed only 500 ms after the last keyup event 
    // make Ajax request 
    }, 500); 
}); 

इस समाधान और अन्य उत्तर से समाधान के बीच मुख्य अंतर यह है कि सभी टाइमर तर्क typewatch समारोह अपने आप में नियंत्रित किया जाता है, ईवेंट हैंडलर एक पता करने की जरूरत नहीं है टाइमर के बारे में nything, यह सिर्फ समारोह को आमंत्रित करता है। इसके अलावा, देखभाल करने के लिए कोई वैश्विक चर नहीं है (टाइमर आईडी वैश्विक चर पर संग्रहीत नहीं है)।

Answer 6

var keyTimer; 
function onKeyUp(){ 
clearTimeout(keyTimer); 
setTimeout(stoppedTyping,1500); 
} 
function stoppedTyping(){ 
// Profit! $$$ 
} 

संपादित करें: अरे निंजा

Answer 7

मैं एक कस्टम jQuery घटना लिखा था क्योंकि मैं इस तर्क एक बहुत का उपयोग करें:

jQuery.event.special.stoppedtyping = { 
    setup: function(data, namespaces) { 
    jQuery(this).bind('keyup', jQuery.event.special.stoppedtyping.keyuphandler); 
    }, 
    teardown: function(namespaces) { 
    jQuery(this).bind('keyup', jQuery.event.special.stoppedtyping.keyuphandler); 
    }, 
    keyuphandler: function(e) { 
    var interval = 1000; 
    var el = this; 

    if (jQuery.data(this, 'checklastkeypress') != null) { 
     clearTimeout(jQuery.data(this, 'checklastkeypress')); 
    } 

    var id = setTimeout(function() { 
     jQuery(el).trigger('stoppedtyping'); 
    }, interval); 
    jQuery.data(this, 'checklastkeypress', id); 
    } 
}; 

आप इस तरह इसका इस्तेमाल कर सकते हैं:

$('input.title').bind('stoppedtyping', function() { 
    // run some ajax save operation 
}); 

किसी कारण से मैं इसे कभी भी काम नहीं कर सकता। लाइव (...)। मुझे यकीन नहीं है कि क्यों ...