फोकस या टैब कुंजी पर इनपुट दबाया गया, स्क्रीन के केंद्र में जाएं

Question

मेरे पास पेज फोल्ड पर फैले कई फॉर्म फ़ील्ड हैं। प्रत्येक इनपुट/चयन फ़ील्ड के माध्यम से चरणबद्ध करने के लिए "टैब" कुंजी दबाते समय यह पृष्ठ के तह के नीचे अगले फ़ील्ड पर बैठता है।

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

क्या कोई जावास्क्रिप्ट या jQuery स्क्रिप्ट है जो निचले स्तर पर संरेखित करने के बजाय एक केंद्रित इनपुट/टेक्स्टरेरा/चयन/बटन फ़ील्ड के चारों ओर स्क्रीन को लंबवत रूप से केंद्रित कर सकती है?

Answer 1

आप केवल फोकस ईवेंट से जुड़ सकते हैं और फिर फ़ील्ड के ऑफसेट की गणना कर सकते हैं और स्क्रीन पर इसे केन्द्रित कर सकते हैं।

$(':input').focus(function(){ 
    var center = $(window).height()/2; 
    var top = $(this).offset().top ; 
    if (top > center){ 
     $(window).scrollTop(top-center); 
    } 
}); 

Answer 2

सबसे आसान बात jQuery ScrollTo plugin और jQuery Viewport प्लगइन शामिल करने के लिए किया जाएगा।

फिर प्रत्येक इनपुट + संबंधित अन्य तत्वों (सत्यापन प्रतिक्रिया, ....) को एक div में लपेटें।

फोकस पर जांच करें कि क्या div पूरी तरह से दिखाई दे रहा है, अगर scrollTo का उपयोग न करें। किया हुआ।

बेशक यह एक ब्लोट का थोड़ा सा है, लेकिन यदि आप 2 और निर्भरताओं के साथ रह सकते हैं और अतिरिक्त ~ 4 केबी यह गणना स्वयं किए बिना काम करना चाहिए।

Answer 3

चिकनी स्क्रॉल प्रभाव से

$(':input').focus(function() { 
     var center = $(window).height()/2; 
     var top = $(this).offset().top; 
     if (top > center) { 
      $('html, body').animate({ scrollTop: top - center }, 'fast');    
     } 
    });