मैं id से स्वतंत्र HTML फॉर्म में पहले इनपुट तत्व पर कैसे ध्यान केंद्रित करूँ?

Question

क्या प्रथम इनपुट तत्व (टेक्स्टबॉक्स, ड्रॉपडेललिस्ट, ...) पर वेब पेज का फोकस (इनपुट कर्सर) सेट करने का एक आसान तरीका है , जो तत्व की आईडी को जाने बिना पेज लोड करने पर है?

मैं इसे अपने वेब पेज के सभी पृष्ठों / रूपों के लिए एक सामान्य स्क्रिप्ट के रूप में लागू करना चाहूंगा।

Comments

REMARK अगर फॉर्म को पेज में एक तरह से नीचे रखा जाता है तो उपयोगकर्ता को फॉर्म देखने के लिए पेज को नीचे स्क्रॉल करना होगा, फोकस सेट करने से पेज स्वचालित रूप से नीचे स्क्रॉल हो जाएगा जैसे कि एंकर करेगा। यह बहुत अच्छा कारण नहीं है कि उपयोगकर्ता को इस तरह के पेज पर आने से तुरंत ही फॉर्म की स्थिति में स्क्रॉल कर जाना होगा। मैंने सफारी और एफएफ पर परीक्षण किया (IE7 पृष्ठ स्क्रॉलिंग नहीं करता है)।

— मार्को डेमायो

@Marco_Demaio मेरा वेब ऐप इस तरह से संरचित है कि हर पृष्ठ पर विंडो के शीर्ष के पास इसके इनपुट बॉक्स हैं।

— बत्तीसी

क्या होगा यदि उपयोगकर्ता ने ब्राउज़र विंडो की ऊँचाई 768px से कुछ छोटी कर दी। पृष्ठ जहाँ आप फ़ोकस सेट करते हैं, स्क्रॉल करेंगे। वैसे भी मैं केवल आपको इस मामले में चेतावनी देना चाहता था कि आप इस तरह के मामूली मुद्दे के बारे में नहीं जानते थे, मैं कुछ परीक्षण करने से पहले इसके बारे में नहीं जानता था।

— मार्को डेमायो

Answer 1

आप jQuery आधारित विधि भी आज़मा सकते हैं:

$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});

Comments

यह काम करता हैं! मैं अपने वेब एप्लिकेशन में jQuery को एकीकृत करना शुरू कर रहा हूं। तो, मुझे लगता है कि मैं इस दृष्टिकोण के साथ रहना होगा! बहुत धन्यवाद, मार्को!

— फुलटैन

यदि इस मामले में पृष्ठ पर पहला रूप छिपा हुआ है तो क्या होगा? या अगर सीएसएस के माध्यम से फॉर्म पर पहला तत्व छिपा हुआ है? निश्चित रूप से यह विफल होगा। मुझे बेशक पांडित्य हो रहा है लेकिन मैं कैसे रोल करती हूं।

— जेम्स ह्यूजेस

मेरे मामले में (ASP.NET का उपयोग करके) मेरे पास सिर्फ एक ही फॉर्म है जो कभी छिपा नहीं है। तो यह मेरे लिए काम करता है।

— 14

@Jame ह्यूजेस, आप इसे एक फ़ंक्शन के रूप में लिख सकते हैं और इसे कॉल कर सकते हैं जब यू की आवश्यकता होती है, और आप अपवाद बना सकते हैं। मेरे लिए इस समाधान ने वास्तव में मदद की।

— लुसी

यह किसी कारण से मेरे लिए काम नहीं कर रहा है। क्या मुझे एक कर्सर नहीं देखना चाहिए

— क्रिस

Answer 2

यद्यपि यह प्रश्न का उत्तर नहीं देता है (एक सामान्य स्क्रिप्ट की आवश्यकता होती है), मैं हालांकि दूसरों के लिए यह जानना उपयोगी हो सकता है कि HTML5 'ऑटोफोकस' विशेषता का परिचय देता है:

<form>
  <input type="text" name="username" autofocus>
  <input type="password" name="password">
  <input type="submit" value="Login">
</form>

HTML5 में गोता लगाने से अधिक जानकारी होती है।

Comments

ऑटोफोकस इसका नाम है। इसके मूल्य के बारे में क्या? सोमफिग जैसे ऑटोफोकस = सच की जरूरत नहीं है? किसी भी मूल्य को निर्धारित नहीं करने का क्या मतलब है?

— गीक

HTML5 में, कुछ विशेषताओं को एक मान रखने की आवश्यकता नहीं है, 'चेक' एक अन्य विशेषता है जहां यह मामला है। मेरा मानना ​​है कि जब मूल्य छोड़ दिया जाता है, तो यह निहित है कि यह नाम के समान है (उदाहरण के लिए ऑटोफोकस = "ऑटोफोकस" और चेक किया गया = "चेक किया गया")।

— जैकब स्टेनली

जब मेरा autofocusकोई मूल्य नहीं है, तो मेरा स्प्रिंग ऐप टूट जाता है spring:form। autofocus="autofocus"हालांकि ठीक काम करता है। धन्यवाद, @ जेकब।

— सर्गेई टैचेनोव

@ गीक ऑटोफोकस विशेषता, कई अन्य के रूप में, एक बूलियन विशेषता प्रकार है। इसीलिए इसे केवल एक घोषणात्मक तरीके से उपयोग किया जाता है, न कि इसके लिए एक मूल्य निर्दिष्ट करके। W3c

— n1kkou

Answer 3

document.forms[0].elements[0].focus();

यह उदाहरण के लिए एक लूप का उपयोग करके परिष्कृत किया जा सकता है। कुछ प्रकार के फ़ील्ड, अक्षम फ़ील्ड और इतने पर ध्यान न दें। बेहतर हो सकता है कि आप जिस क्षेत्र में वास्तव में ध्यान केंद्रित करना चाहते हैं, उसमें एक वर्ग = "ऑटोफोकस" जोड़ें और रूपों पर लूप करें [i] .elements [j] उस वर्गनाम की तलाश में।

किसी भी तरह: यह आम तौर पर हर पृष्ठ पर ऐसा करने के लिए एक अच्छा विचार नहीं है। जब आप किसी इनपुट पर ध्यान केंद्रित करते हैं तो उपयोगकर्ता उदा की क्षमता खो देता है। पृष्ठ को कीबोर्ड से स्क्रॉल करें। यदि अनपेक्षित है, तो यह कष्टप्रद हो सकता है, इसलिए केवल ऑटो-फ़ोकस जब आपको पूरा यकीन हो कि फ़ॉर्म फ़ील्ड का उपयोग करने वाला है, जो उपयोगकर्ता करना चाहता है। अर्थात। अगर आप Google हैं।

Comments

सही उत्तर होना चाहिए, क्योंकि प्रश्न में कोई jquery टैग नहीं है।

— कलल एच। वैरावस

@ KalleH.Väravas नहीं, इसे नीचा दिखाया जाना चाहिए क्योंकि यह ऐसी धारणाएं बनाता है जो प्रश्न में कहीं नहीं पाई जाती हैं, जैसे। कम से कम एक रूप है। आम तौर पर, यह काम नहीं करता है।

— 9ilsdx 9rvj 0lo

Answer 4

सबसे व्यापक jQuery अभिव्यक्ति मुझे काम करते हुए मिली ( यहाँ पर मदद से )

$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});

Comments

मैं इस का उपयोग कर रहा था, यह देखा गया है कि IE पर बहुत धीरे-धीरे चलता है जब एक तालिका में बड़ी संख्या में> 1000 चेकबॉक्स होते हैं। सुनिश्चित नहीं है कि इसके बारे में क्या करना है, पहले इनपुट क्षेत्र पर ध्यान केंद्रित करने के लिए बस छोड़ देना पड़ सकता है।

— सैम वाटकिंस

Answer 5

यदि आप प्रोटोटाइप जावास्क्रिप्ट फ्रेमवर्क का उपयोग कर रहे हैं तो आप फ़ोकसफ्रीमेंट पद्धति का उपयोग कर सकते हैं :

Form.focusFirstElement(document.forms[0]);

Answer 6

यहां एक राइट-अप है जो उपयोग का हो सकता है: वेब पेज पर फ़ोकस टू फ़र्स्ट इनपुट पर सेट करें

Answer 7

आपको किसी छिपे हुए इनपुट को भी छोड़ना होगा।

for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();

Comments

मैं गलत हो सकता हूं, लेकिन इस लूप में परिभाषित व्यवहार नहीं है यदि रूपों [0] में कोई छिपा इनपुट नहीं है।

— xtofl

बिल्कुल सही। इसका उपयोग किसी भी प्रमुख छिपे हुए इनपुट को छोड़ने के लिए किया जाता है। और यह धारणा के तहत लिखा गया है कि फार्म में गैर-छिपे हुए क्षेत्र हैं। मैं इसे jQuery के साथ भी कर सकता था (मैं एक और उत्तर पोस्ट करूँगा) लेकिन आपने यह उल्लेख नहीं किया कि आप jQuery शामिल करना चाहते हैं।

— मार्को डुमिक

@MarkoDumic यदि आप किसी whileकथन का उपयोग कर सकते हैं तो स्मृति को क्यों बर्बाद करें ?

— लुसियो

Answer 8

इस कोड को अपने bodyटैग के अंत में डालने से स्क्रीन पर पहले दिखाई देने वाला, गैर-छिपा हुआ सक्षम तत्व स्वचालित रूप से केंद्रित हो जाएगा। यह ज्यादातर मामलों को संभालता है जिन्हें मैं शॉर्ट नोटिस पर ले सकता हूं।

<script>
    (function(){
        var forms = document.forms || [];
        for(var i = 0; i < forms.length; i++){
            for(var j = 0; j < forms[i].length; j++){
                if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){
                    forms[i][j].focus();
                    return;
                }
            }
        }
    })();
</script>

Comments

यहां एक बात पर गौर करें कि यह उन तत्वों से मेल खा सकता है जो स्वयं छिपे नहीं हैं बल्कि पूर्वज हैं। डोम को वापस ट्रैक करने और प्रत्येक पूर्वजों की दृश्यता का परीक्षण करने की आवश्यकता होगी जो मुझे लगता है कि इस तरह की स्थिति के लिए गंभीर ओवरकिल है।

— जेम्स ह्यूजेस

क्या के बारे में <input type = "text" readonly = "readonly"> मुझे लगता है कि आपको अपने कोड में ऐसा मामला जोड़ना चाहिए। आम तौर पर लोग आसानी से इनपुट पाठ क्षेत्र पर ध्यान केंद्रित नहीं करना चाहते हैं। वैसे भी अच्छा कोड और +1 धन्यवाद!

— मार्को डेमायो

अनटाइटेड लेकिन मैंने इसे अपडेट किया! रूपों [i] [j] .readonly! = अपरिभाषित

— जेम्स ह्यूजेस

Answer 9

ऊपर दिए गए जवाबों की बहुत कोशिश की और वे काम नहीं कर रहे थे। यह एक मिला: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 धन्यवाद कोलोडोर।

$("input:text:visible:first").focus();

Answer 10

मैं इसका उपयोग कर रहा हूं:

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();

Answer 11

यह textareas और चुनिंदा बक्से सहित किसी भी दृश्यमान कॉमन इनपुट का पहला हिस्सा है। यह भी सुनिश्चित करता है कि वे छिपे, अक्षम या आसानी से नहीं हैं। यह एक लक्ष्य div के लिए भी अनुमति देता है, जिसका उपयोग मैं अपने सॉफ़्टवेयर में करता हूं (यानी, इस फॉर्म के अंदर पहला इनपुट)।

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();

Answer 12

उन लोगों के लिए जो JSF2.2 + का उपयोग करते हैं और इसके बिना एक विशेषता के रूप में ऑटोफोकस पारित नहीं कर सकते हैं, इसका उपयोग करें:

 p:autofocus="true"

और इसे नेमस्पेस p में जोड़ दें (इसके अलावा अक्सर pt का उपयोग करें। आपको जो भी पसंद हो)।

<html ... xmlns:p="http://java.sun.com/jsf/passthrough">

Answer 13

के साथ AngularJS:

angular.element('#Element')[0].focus();

Answer 14

इसमें टेक्स्टारिस और रेडियो बटन शामिल नहीं हैं

$(document).ready(function() {
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0];
    if(first_input != undefined){ first_input.focus(); }
});

Answer 15

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

function setFocus() {
    var forms = document.forms || [];
        for (var i = 0; i < forms.length; i++) {
            for (var j = 0; j < forms[i].length; j++) {
            var widget = forms[i][j];
                if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function")
                 && (typeof widget.disabled === "undefined" || widget.disabled === false)
                 && (typeof widget.readOnly === "undefined" || widget.readOnly === false)) {
                        widget.focus();
                        break;
                }
            }
        }
    }   
}

Answer 16

तीसरे पक्ष के काम के बिना, जैसे कुछ का उपयोग करें

  const inputElements = parentElement.getElementsByTagName('input')
  if (inputChilds.length > 0) {
    inputChilds.item(0).focus();
  }

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

Answer 17

बिना jquery, जैसे कि नियमित जावास्क्रिप्ट के साथ:

document.querySelector('form input:not([type=hidden])').focus()

सफ़ारी पर काम करता है लेकिन क्रोम 75 (अप्रैल 2019) नहीं