पहले टेक्स्टबॉक्स पर ध्यान केंद्रित करने से jQuery के यूआई संवाद को रोकें

Question

जब कोई उपयोगकर्ता किसी लिंक पर क्लिक करता है, तो मैंने उसे प्रदर्शित करने के लिए jQuery UI मोडल संवाद सेटअप किया है। उस डायलॉग डिव टैग में दो टेक्स्टबॉक्स होते हैं (मैं केवल 1 के लिए 1 संक्षिप्तता के लिए कोड दिखाता हूं) और इसे jQuery UI DatePicker टेक्स्टबॉक्स में बदल दिया जाता है जो फोकस पर प्रतिक्रिया करता है।

समस्या यह है कि jQuery यूआई डायलॉग ('ओपन') किसी तरह फोकस करने के लिए पहले टेक्स्टबॉक्स को ट्रिगर करता है, जो फिर तुरंत खोलने के लिए डेटपिकर कैलेंडर को ट्रिगर करता है।

इसलिए मैं फोकस को अपने आप होने से रोकने का तरीका ढूंढ रहा हूं।

<div><a id="lnkAddReservation" href="#">Add reservation</a></div>

<div id="divNewReservation" style="display:none" title="Add reservation">
    <table>
        <tr>
            <th><asp:Label AssociatedControlID="txtStartDate" runat="server" Text="Start date" /></th>
            <td>
                <asp:TextBox ID="txtStartDate" runat="server" CssClass="datepicker" />
            </td>
        </tr>
    </table>

    <div>
        <asp:Button ID="btnAddReservation" runat="server" OnClick="btnAddReservation_Click" Text="Add reservation" />
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var dlg = $('#divNewReservation');
        $('.datepicker').datepicker({ duration: '' });
        dlg.dialog({ autoOpen:false, modal: true, width:400 });
        $('#lnkAddReservation').click(function() { dlg.dialog('open'); return false; });
        dlg.parent().appendTo(jQuery("form:first"));
    });
</script>

Comments

यह एक छवि पर भी ध्यान केंद्रित करेगा! दोनों नियमित <img> टैग्स के साथ-साथ <input type = image>

— Simon_Wver

Answer 1

jQuery UI 1.10.0 चांगेलॉग तय किए गए अनुसार टिकट 4731 को सूचीबद्ध करता है।

फ़ोकसलेक्टर की तरह लग रहा था लागू नहीं किया गया था, लेकिन इसके बजाय विभिन्न तत्वों के लिए एक कैस्केडिंग खोज का उपयोग किया गया था। टिकट से:

ऑटोफोकस को बढ़ाएं, [ऑटोफोकस] से शुरू करके, फिर: टैब करने योग्य कंटेंट, फिर बटनपैन, फिर क्लोज बटन, फिर डायलॉग

तो, autofocusविशेषता के साथ एक तत्व को चिह्नित करें और वह तत्व है जिसे फोकस मिलना चाहिए:

<input autofocus>

में प्रलेखन , ध्यान तर्क समझाया गया है (बस सामग्री तालिका के तहत, शीर्षक 'फोकस' के अंतर्गत):

डायलॉग खोलने पर, फ़ोकस स्वचालित रूप से उस पहली आइटम पर चला जाता है जो निम्न से मेल खाती है:

1. संवाद के साथ संवाद के भीतर पहला तत्व autofocusविशेषता के
2. सबसे पहला :tabbableसंवाद की सामग्री के भीतर तत्व
3. सबसे पहला :tabbableसंवाद के बटनपट्टी के भीतर तत्व
4. संवाद का करीबी बटन
5. संवाद ही

Comments

के लिए क्या downvote है? यदि ऐसा इसलिए था क्योंकि मैंने 1.9 को फिक्स संस्करण के रूप में सूचीबद्ध किया था, तो मैंने टिकट के साथ मिलान करने के लिए 1.10 अपडेट किया है।

— slolife

मैं डायलॉग के लिए jquery-ui 1.10 प्रलेखन देख रहा हूं, और मैं इसे नहीं देख रहा हूं। मैंने एपीआई में "फ़ोकस सेलेक्टर" की खोज की, और यह वहां नहीं है।

— पॉल टॉम्बलिन

किसी भी तत्व पर ध्यान केंद्रित करना जो ऑफ स्क्रीन है, उस तत्व को विंडो को ऊपर या नीचे स्क्रॉल करता है, और ऐसा तब होता है जब विंडो फोकस हो जाती है, न कि केवल डायलॉग ओपन पर। अगर मैं फायरबग को "तत्व का निरीक्षण" करने के लिए उपयोग करता हूं और फिर दस्तावेज़ विंडो में वापस क्लिक करता हूं, तो मेरी विंडो स्क्रॉल होती है या जो भी तत्व jQuery-UI पर केंद्रित है। सवाल यह नहीं है कि किस तत्व का चयन कैसे किया जाए, बल्कि फोकस को कैसे रोका जाए । ध्यान केंद्रित करने के लिए एक अलग तत्व चुनने से समस्या का समाधान नहीं होगा।

— व्लादिमीर कोर्ना

JQuery UI को 'फिक्स्ड' मानने वाला विचार पागल है। फिक्स किसी भी ऑटोफोकसिंग लॉजिक को पूरी तरह से हटा देना है । मैंने आपसे एक संवाद खोलने के लिए कहा, न कि किसी इनपुट पर ध्यान केंद्रित करने के लिए। गुस्सा कर देने वाला।

— एजेबी

fwiw, मैंने पहले इनपुट के ऊपर एक इनपुट w / type = "हिडन" जोड़ा और इसमें ऑटोफोकस विशेषता जोड़ी। इसका मतलब यह नहीं है कि आप क्या सोचते हैं इसका मतलब है, लेकिन यह इस समस्या को ठीक करने के लिए काम करता है।

— jinglesthula

Answer 2

इसके ऊपर एक छिपी हुई अवधि जोड़ें, इसे पूर्ण स्थिति से छुपाने के लिए यूआई-हेल्पर-छिपे-सुलभ का उपयोग करें। मुझे पता है कि आपके पास वह वर्ग है क्योंकि आप jquery-ui से संवाद का उपयोग कर रहे हैं और यह jquery-ui में है।

<span class="ui-helper-hidden-accessible"><input type="text"/></span>

Comments

चारों ओर शानदार काम। किसी भी js की आवश्यकता नहीं है, लेआउट को नहीं बदलता है, और jquery ui इसे मूल रूप से समर्थन करता है।

— भाप

सहमत, चारों ओर महान काम। छिपे-सुलभ वर्ग के बारे में जानकर भी अच्छा लगा! धन्यवाद!!

— user1055761

यह सहायक प्रौद्योगिकी (जैसे स्क्रीन रीडर) का उपयोग करने वाले लोगों के लिए समस्या का कारण बनता है

— rink.attenders.6

@ rink.attenders.6 कौन सी समस्याएं?

— ऑक्सफ़न

अद्भुत समाधान

— पेड्रो कोएलो

Answer 3

JQuery UI> = 1.10.2 में, आप _focusTabbableएक स्थान फ़ंक्शन द्वारा प्रोटोटाइप विधि को प्रतिस्थापित कर सकते हैं :

$.ui.dialog.prototype._focusTabbable = $.noop;

बेला

यह dialogमैन्युअल रूप से प्रत्येक को संपादित करने की आवश्यकता के बिना पृष्ठ के सभी एस को प्रभावित करेगा ।

मूल फ़ंक्शन autofocusविशेषता / tabbableतत्व के साथ पहले तत्व पर ध्यान केंद्रित करने या स्वयं संवाद में वापस आने के अलावा कुछ भी नहीं करता है। के रूप में इसका उपयोग सिर्फ एक तत्व पर ध्यान केंद्रित कर रहा है, कोई समस्या नहीं है इसे एक द्वारा प्रतिस्थापित किया जाना चाहिए noop।

Comments

इस पर घंटे और घंटे और घंटे और घंटे जला दिए गए। मेरे ग्राहक धन्यवाद।

— लम्मरेंट

इसका उत्तर होना चाहिए!

— ब्रायनसोल

2 दिनों के लिए इस समाधान की खोज की ... कुछ और काम नहीं किया ... बहुत बहुत धन्यवाद!

— लीजियारन

चेतावनी: जब डायलॉग पॉप अप होता है, तो एस्केप कुंजी दबाने से डायलॉग बंद नहीं होगा (जब तक आप डायलॉग को फोकस नहीं करते)।

— रॉबर्ट

@ रोबर्ट ने इसे बदलने के बजाय $.noop, इसे एक ऐसे फ़ंक्शन से प्रतिस्थापित किया जो सक्रिय संवाद को नोट करता है, फिर एक वैश्विक कुंजी ईवेंट हैंडलर पंजीकृत करें जो एक होने ESCपर 'सक्रिय' संवाद को स्वीकार करता है और बंद करता है।

— पर्किन्स

Answer 4

JQuery UI 1.10.0 से शुरू करके, आप HTML5 विशेषता ऑटोफोकस का उपयोग करके किस इनपुट तत्व को चुन सकते हैं ।

आपको केवल संवाद बॉक्स में अपना पहला इनपुट के रूप में एक डमी तत्व बनाना है। यह आपके लिए फोकस को सोख लेगा।

<input type="hidden" autofocus="autofocus" />

7 फरवरी, 2013 को क्रोम, फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर (सभी नवीनतम संस्करण) में इसका परीक्षण किया गया है।

http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open

Answer 5

मुझे खुले के लिए निम्न कोड jQuery UI संवाद फ़ंक्शन मिला।

c([]).add(d.find(".ui-dialog-content :tabbable:first")).add(d.find(".ui-dialog-buttonpane :tabbable:first")).add(d).filter(":first").focus();

आप या तो jQuery के व्यवहार को हल कर सकते हैं या व्यवहार को बदल सकते हैं।

tabindex -1 वर्कअराउंड के रूप में काम करता है।

Comments

Tabindex = -1 क्या मुझे टेक्स्टबॉक्स में जाने से नहीं रोकेगा?

— स्लॉइफ जूल

शोध के लिए धन्यवाद। अब मुझे पता है कि यह वास्तविक कोड है जो यह कर रहा है। मैं इस ऑटो-फ़ोकस को अक्षम करने के लिए एक विकल्प जोड़ने के लिए jQuery UI टीम को एक सुझाव दे सकता हूं।

— गुलाम

@ सलोलिफ़ - यह वास्तव में पुराने धागे को फिर से जीवित करने के लिए क्षमा करें, लेकिन वह टिकट कहता है कि फिक्स ( focusSelectorविकल्प) को jQueryUI 1.8 में माना जाता है, और अब हम 1.8.13 पर हैं और मैं इसे jQueryUI संवाद डॉक्स में नहीं देखता हूं । यह क्या हो गया?

— टॉम हैमिंग 20

कोई बात नहीं। मैंने संशोधन के इतिहास में "माइलस्टोन को टीबीडी से 1.8 में बदल दिया" देखा था, और ध्यान नहीं दिया था कि यह वास्तव में शीर्ष पर 1.9 कहता है।

— टॉम हैमिंग

मेरे पास एक ऐसी ही समस्या है, मेरे वर्कअराउंड का वर्णन यहां किया गया है - stackoverflow.com/a/12250193/80002

— मार्क करें

Answer 6

चारों ओर खेलते हुए बस यह पता लगा।

मुझे ध्यान हटाने के लिए इन समाधानों के साथ मिला, जिसके कारण ESC जब डायलॉग में जाने से पहले (यानी डायलॉग को बंद करना) काम करना बंद कर दिया।

यदि संवाद खुलता है और आप तुरंत दबाते हैं ESC , तो यह संवाद को बंद नहीं करेगा (यदि आपके पास वह सक्षम है), क्योंकि फोकस कुछ छिपे हुए क्षेत्र या कुछ और पर है, और इसे कीपर ईवेंट नहीं मिल रहा है।

जिस तरह से मैंने तय किया था कि इसके बजाय पहले क्षेत्र से ध्यान हटाने के लिए इसे खुली घटना में जोड़ना था:

$('#myDialog').dialog({
    open: function(event,ui) {
        $(this).parent().focus();
    }
});

यह डायलॉग बॉक्स पर ध्यान केंद्रित करता है, जो दिखाई नहीं देता है और फिर ESCकुंजी काम करता है।

Comments

यह एकमात्र कार्यशील समाधान प्रतीत होता है, जिसमें बेकार HTML जोड़ना, टैबइंडेक्स को हटाना या ESC कुंजी को तोड़ना शामिल नहीं है।

— बोजन बेड्राक

Answer 7

-1 इनपुट की टैबिन्डेक्स को सेट करें, और उसके बाद डायलॉग सेट करें। टैबइंडेक्स को पुनर्स्थापित करने के लिए यदि आपको बाद में इसकी आवश्यकता हो:

$(function() {
    $( "#dialog-message" ).dialog({
        modal: true,
        width: 500,
        autoOpen: false,
        resizable: false,
        open: function()
        {
            $( "#datepicker1" ).attr("tabindex","1");
            $( "#datepicker2" ).attr("tabindex","2");
        }
    });
});

Comments

Tabindex = -1 क्या मुझे टेक्स्टबॉक्स में जाने से नहीं रोकेगा?

— slolife

यू एक setTimeout का उपयोग संवाद के बाद tabindex वापस स्थापित करने के लिए कर सकता है दिखाया गया है

— redsquare

Answer 8

मेरा समाधान:

open: function(){
  jQuery('input:first').blur();
  jQuery('#ui-datepicker-div').hide();
},  

Comments

+1। :firstचयनकर्ता या .first()FF / Chrome / IE9 का उपयोग करके आकर्षण की तरह काम करता है । इसे dialogopenबाध्यकारी कार्यों में भी फेंक दिया ।

— 3

यह एक मुझे वहाँ भी मिला। मेरे अलावा, मेरे संवाद में कोई इनपुट नहीं था, और पहला लिंक फ़ोकस हो रहा था ... इसलिए मैंने इस विकल्प को अपने jQuery डायलॉग में जोड़ा:open: function(){ $('a').blur(); // no autofocus on links }

— Marcus

Answer 9

मेरे पास सामग्री थी जो संवाद से अधिक लंबी थी। खुलने पर, संवाद पहले: टेब्बल जो सबसे निचले भाग पर होता है, को डाँटेंगे। यहाँ मेरा फिक्स था।

$("#myDialog").dialog({
   ...
   open: function(event, ui) { $(this).scrollTop(0); }
});

Comments

इसने मेरे लिए काम किया, लेकिन मैंने $('...').blur();स्क्रॉल करने के बजाय इसका इस्तेमाल किया ।

— जवा

मेरा कंटेंट भी बहुत लंबा था। ब्लर ने चयन को हटा दिया, लेकिन डायलॉग को नीचे तक स्क्रॉल किया। स्क्रॉलटॉप ने सामग्री को शीर्ष पर स्क्रॉल किया लेकिन चयन छोड़ दिया। मैंने $ ('...') का उपयोग करके समाप्त किया। धुंधला (); $ (इस) .scrollTop (0); एक विजेता की तरह काम किया।

Answer 10

सरल समाधान:

बस टैबइंडेक्स = 1 के साथ एक अदृश्य तत्व बनाएं ... यह डेटपिकर पर ध्यान केंद्रित नहीं करेगा ...

उदा .:

<a href="" tabindex="1"></a>
...
Here comes the input element

Comments

Ie9 और फ़ायरफ़ॉक्स में ठीक काम करता है, लेकिन सफारी / क्रोम नहीं।

— टूसो

Answer 11

यहाँ समाधान है जिसे मैंने jQuery UI टिकट # 4731 के माध्यम से पढ़ने के बाद लागू किया है किया है, मूल रूप से स्लॉइफ़ द्वारा किसी अन्य उत्तर की प्रतिक्रिया के रूप में पोस्ट किया गया है। (उनके द्वारा टिकट भी बनाया गया था।)

सबसे पहले, आप जिस भी विधि का उपयोग करते हैं, वह पृष्ठ पर स्वतः पूर्णताएँ लागू करने के लिए, कोड की निम्न पंक्ति जोड़ें:

$.ui.dialog.prototype._focusTabbable = function(){};

यह jQuery के "ऑटो-फ़ोकस" व्यवहार को अक्षम करता है। यह सुनिश्चित करने के लिए कि आपकी साइट व्यापक रूप से सुलभ है, अपने संवाद निर्माण विधियों को लपेटें ताकि अतिरिक्त कोड जोड़ा जा सके, और पहले इनपुट तत्व पर ध्यान केंद्रित करने के लिए कॉल जोड़ें:

function openDialog(context) {

    // Open your dialog here

    // Usability for screen readers.  Focus on an element so that screen readers report it.
    $("input:first", $(context)).focus();

}

जब कीबोर्ड के माध्यम से स्वत: पूर्ण विकल्पों का चयन किया जाता है, तो एक्सेस एक्सेसिबिलिटी को आगे बढ़ाने के लिए, हम jQuery UI के "सेलेक्ट" को स्वतः पूर्ण करते हुए ओवरराइड करते हैं और यह सुनिश्चित करने के लिए कुछ अतिरिक्त कोड जोड़ते हैं कि चयन करने के बाद पाठ 8 IE में फ़ोकस नहीं खोता है।

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

$.fn.applyAutocomplete = function () {

    // Prevents jQuery dialog from auto-focusing on the first tabbable element.
    // Make sure to wrap your dialog opens and focus on the first input element
    // for screen readers.
    $.ui.dialog.prototype._focusTabbable = function () { };

    $(".autocomplete", this)
        .each(function (index) {

            var textElement = this;

            var onSelect = $(this).autocomplete("option", "select");
            $(this).autocomplete("option", {
                select: function (event, ui) {
                    // Call the original functionality first
                    onSelect(event, ui);

                    // We replace a lot of content via AJAX in our project.
                    // This ensures proper copying of values if the original element which jQuery UI pointed to
                    // is replaced.
                    var $hiddenValueElement = $("#" + $(textElement).attr('data-jqui-acomp-hiddenvalue'));
                    if ($hiddenValueElement.attr("value") != ui.item.value) {
                        $hiddenValueElement.attr("value", ui.item.value);
                    }

                    // Replace text element value with that indicated by "display" if any
                    if (ui.item.display)
                        textElement.value = ui.item.display;

                    // For usability purposes.  When using the keyboard to select from an autocomplete, this returns focus to the textElement.
                    $(textElement).focus();

                    if (ui.item.display)
                        return false;

                }
            });
        })
        // Set/clear data flag that can be checked, if necessary, to determine whether list is currently dropped down
        .on("autocompleteopen", function (event, ui) {
            $(event.target).data().autocompleteIsDroppedDown = true;
        })
        .on("autocompleteclose", function (event, ui) {
            $(event.target).data().autocompleteIsDroppedDown = false;
        });

    return this;
}

Answer 12

इसके बजाय क्लोज़ बटन को फ़ोकस करने के लिए आप यह विकल्प प्रदान कर सकते हैं।

.dialog({
      open: function () {
              $(".ui-dialog-titlebar-close").focus();
            }
   });

Answer 13

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

$('#lnkAddReservation').click(function () {
    dlg.dialog('open');

    // you may want to change the selector below
    $('input,textarea,select').blur();

    return false;
});

परीक्षण नहीं किया गया है, लेकिन ठीक काम करना चाहिए।

Comments

दुख की बात है कि यह काम नहीं करता है। यकीन नहीं है कि यह एक IE बात है, या एक jquery यूआई बात है। लेकिन यहां तक ​​कि अगर आप प्रोग्राम पर ध्यान केंद्रित करके किसी और चीज़ पर ले जाते हैं, तो कैलेंडर खुला रहता है।

— पेट्रीसिया

Answer 14

मैं एक ही मुद्दा था और डेटपिकर से पहले एक खाली इनपुट डालने से इसे हल किया, कि हर बार संवाद खुलने पर ध्यान चुराता है। यह इनपुट संवाद के प्रत्येक उद्घाटन पर छिपा हुआ है और समापन पर फिर से दिखाया गया है।

Answer 15

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

उपयोग विकल्प [autoOpen: false]

$toolTip.dialog("widget").css("visibility", "hidden"); 
$toolTip.dialog("open");
$toolTip.dialog("widget").css("visibility", "visible");

हालांकि संवाद अदृश्य है, फोकस कहीं भी सेट नहीं है और मूल स्थान पर ही रहता है। यह सिर्फ एक सादे पाठ के साथ टूलटिप्स के लिए काम करता है, लेकिन अधिक कार्यात्मक संवादों के लिए परीक्षण नहीं किया जाता है, जहां शुरुआती क्षण में संवाद दिखाई देना महत्वपूर्ण हो सकता है। संभवतः किसी भी मामले में ठीक काम करेगा।

मैं समझता हूं कि मूल पोस्ट सिर्फ पहले तत्व पर ध्यान केंद्रित करने से बचने के लिए थी, लेकिन आप आसानी से तय कर सकते हैं कि डायलॉग खुलने के बाद (मेरे कोड के बाद) कहां होना चाहिए।

IE, FF और Chrome में परीक्षण किया गया।

उम्मीद है कि इससे किसी को मदद मिलेगी।

Answer 16

मेरी राय में यह समाधान बहुत अच्छा है:

$("#dialog").dialog({
    open: function(event, ui) {
        $("input").blur();
    }
});

यहां पाया गया: असमर्थ-से-हटाने-ऑटोफोकस-इन-उई-संवाद

Answer 17

मुझे एक ऐसी ही समस्या है। मैं एक त्रुटि संवाद खोलता हूं जब सत्यापन विफल हो जाता है और यह फ़ोकस पकड़ लेता है, जैसे फ्लुगन अपने उत्तर में दिखाता है । समस्या यह है कि भले ही संवाद के अंदर कोई तत्व टैब्बल न हो, फिर भी संवाद स्वयं केंद्रित है। यहाँ jquery-ui-1.8.23 \ js \ jquery.ui.dialog.js से मूल अनधिकृत कोड है:

// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
$(self.element.find(':tabbable').get().concat(
  uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
    uiDialog.get()))).eq(0).focus();

टिप्पणी उनकी है!

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

मैंने पाया कि निम्नलिखित वर्कअराउंड मेरे लिए बहुत अच्छा है:

jqueryFocus = $.fn.focus;
$.fn.focus = function (delay, fn) {
  jqueryFocus.apply(this.filter(':not(.ui-dialog)'), arguments);
};

Comments

इसे केवल डाइलॉग () में 'डायलॉगक्लास' विकल्प का उपयोग करके और फिर अपनी कक्षा को शामिल करने के लिए फ़िल्टर नहीं करके 'डायलॉगक्लास' विकल्प का उपयोग करके केवल विशिष्ट संवाद को प्रभावित करने के लिए बढ़ाया जा सकता है। उदाहरण: नहीं (.ui-Dial.myDialogClass)

— एंड्रयू मार्टिनेज

Answer 18

मैं एक अलग मुद्दे के लिए चारों ओर देख रहा था, लेकिन एक ही कारण। मुद्दा यह है कि यह संवाद पहली बार खोजने पर ध्यान केंद्रित <a href="">.</a>करता है। इसलिए यदि आपके संवाद में बहुत सारे पाठ हैं और स्क्रॉल बार दिखाई देते हैं तो आपके पास ऐसी स्थिति हो सकती है जहां स्क्रॉल बार को नीचे तक स्क्रॉल किया जाएगा। मेरा मानना ​​है कि यह पहले व्यक्तियों के प्रश्न को भी ठीक करता है। हालांकि दूसरों के रूप में अच्छी तरह से करते हैं।

फिक्स को समझने के लिए सरल आसान है। <a id="someid" href="#">.</a> आपके डायलॉग डिव में पहली पंक्ति के रूप में।

उदाहरण:

 <div id="dialogdiv" title="some title">
    <a id="someid" href="#">.</a>
    <p>
        //the rest of your stuff
    </p>
</div>

जहाँ आपका संवाद आरंभ किया जाता है

$(somediv).dialog({
        modal: true,
        open: function () { $("#someid").hide(); otherstuff or function },
        close: function () { $("#someid").show(); otherstuff or function }
    });

ऊपर कुछ भी केंद्रित नहीं होगा और स्क्रॉल पट्टियां शीर्ष पर रहेंगी जहां वह है। <a>फोकस हो जाता है, लेकिन फिर छिपा हुआ है। तो समग्र प्रभाव वांछित प्रभाव है।

मुझे पता है कि यह एक पुराना धागा है, लेकिन UI डॉक्स के लिए जैसा कि इस पर कोई फिक्स नहीं है। इसके लिए ब्लर या काम पर ध्यान देने की आवश्यकता नहीं होती है। यकीन नहीं है कि यह सबसे सुंदर है। लेकिन यह सिर्फ समझदारी और किसी को समझाने में आसान बनाता है।

Answer 19

यदि आपके पास जेकरी डायलॉग के रूप में केवल एक फ़ील्ड है और यह वह है जिसे डेटापिक की आवश्यकता है, तो वैकल्पिक रूप से, आप बस डायलॉग के शीर्षक बार में डायलॉग क्लोज़ (क्रॉस) बटन पर ध्यान केंद्रित कर सकते हैं :

$('.ui-dialog-titlebar-close').focus();

इस AFTER डायलॉग को इनिशियलाइज़ किया गया, जैसे:

$('#yourDialogId').dialog();
$('.ui-dialog-titlebar-close').focus();

क्योंकि बंद बटन .dialog()को कहा जाता है के बाद प्रदान की जाती है।

Answer 20

यदि आप संवाद बटन का उपयोग कर रहे हैं, तो केवल autofocusएक बटन पर विशेषता सेट करें :

$('#dialog').dialog({
  buttons: [
    {
      text: 'OK',
      autofocus: 'autofocus'
    },
    {
      text: 'Cancel'
    }
  ]
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<div id="dialog" title="Basic dialog">
  This is some text.
  <br/>
  <a href="www.google.com">This is a link.</a>
  <br/>
  <input value="This is a textbox.">
</div>

Answer 21

मुझे भी यही समस्या हुई।

मैंने जो वर्कअराउंड किया, उसमें डमी टेक्स्टबॉक्स को डायलॉग कंटेनर के शीर्ष पर जोड़ा गया है।

<input type="text" style="width: 1px; height: 1px; border: 0px;" />

Answer 22

जैसा कि उल्लेख किया गया है, यह jQuery UI के साथ एक ज्ञात बग है और इसे अपेक्षाकृत जल्द ही तय किया जाना चाहिए। तब तक...

यहाँ एक और विकल्प है, इसलिए आपको टैबइंडेक्स के साथ गड़बड़ नहीं करना है:

संवाद बॉक्स खुलने तक अस्थायी रूप से डेटपिकर अक्षम करें:

dialog.find(".datepicker").datepicker("disable");
dialog.dialog({
    "open": function() {$(this).find(".datepicker").datepicker("enable");},
});

मेरे लिये कार्य करता है।

डुप्लिकेट प्रश्न: डायलॉग ओपनिंग में फर्स्ट फॉर्म इनपुट को कैसे ब्लर करें

Answer 23

पिछले उत्तरों में से कुछ पर विस्तार करने के लिए (और सहायक तिथि के पहलू को अनदेखा करना), यदि आप इस focus()घटना को पहले इनपुट क्षेत्र पर ध्यान केंद्रित करने से रोकना चाहते हैं जब आपका संवाद खुलता है, तो यह प्रयास करें:

$('#myDialog').dialog(
    { 'open': function() { $('input:first-child', $(this)).blur(); }
});

Answer 24

मेरे पास एक समान समस्या थी और खुले के बाद संवाद पर ध्यान केंद्रित करके इसे हल किया:

var $dialog = $("#pnlFiltros")
    .dialog({
        autoOpen: false,
        hide: "puff",                   
        width: dWidth,
        height: 'auto',
        draggable: true,
        resizable: true,
        closeOnScape : true,
        position: [x,y]                    
    });
$dialog.dialog('open');
$("#pnlFiltros").focus(); //focus on the div being dialogued (is that a word?)

लेकिन मेरे मामले में पहला तत्व एक एंकर है, इसलिए मुझे नहीं पता कि आपके मामले में क्या डेटपिकर खोला गया है।

संपादित करें: केवल IE पर काम करता है

Answer 25

jquery.ui.js में खोजें

d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(0).focus(); 

और के साथ बदलें

d.find(".ui-dialog-buttonpane :tabbable").get().concat(d.get()))).eq(-1).focus();

Answer 26

jQuery 1.9 जारी किया गया है और वहाँ एक तय होने के लिए प्रकट नहीं होता है। सुझाए गए तरीकों में से कुछ द्वारा पहले पाठ बॉक्स के फोकस को रोकने का प्रयास 1.9 में काम नहीं कर रहा है। मुझे लगता है कि उन तरीकों पर ध्यान केंद्रित करने या ध्यान केंद्रित करने का प्रयास करने से पहले संवाद में टेक्स्ट बॉक्स के बारे में ध्यान दें और अपने गंदे काम को पहले ही पूरा कर लें।

मैं एपीआई प्रलेखन में कुछ भी नहीं देख सकता हूं जो मुझे लगता है कि अपेक्षित कार्यक्षमता के संदर्भ में कुछ भी बदल गया है। एक ओपनर बटन जोड़ने के लिए बंद ...

Comments

फिक्स को अब jQuery टिकट के अनुसार 1.10 पर धकेल दिया गया है: Bugs.jqueryui.com/ticket/4731

— slolife

Answer 27

मुझे भी ऐसी ही समस्या थी। मेरे पेज पर पहला इनपुट jQuery यूआई कैलेंडर के साथ टेक्स्ट बॉक्स है। दूसरा तत्व बटन है। जैसा कि पहले से ही मूल्य है, मैंने बटन पर ध्यान केंद्रित किया है, लेकिन पहले टेक्स्ट बॉक्स पर ब्लर के लिए ट्रिगर जोड़ें। यह सभी ब्राउज़रों में समस्या को हल करता है और संभवतः jQuery के सभी संस्करण में। संस्करण 1.8.2 में परीक्षण किया गया।

<div style="padding-bottom: 30px; height: 40px; width: 100%;">
@using (Html.BeginForm("Statistics", "Admin", FormMethod.Post, new { id = "FormStatistics" }))
{
    <label style="float: left;">@Translation.StatisticsChooseDate</label>
    @Html.TextBoxFor(m => m.SelectDate, new { @class = "js-date-time",  @tabindex=1 })
    <input class="button gray-button button-large button-left-margin text-bold" style="position:relative; top:-5px;" type="submit" id="ButtonStatisticsSearchTrips" value="@Translation.StatisticsSearchTrips"  tabindex="2"/>
}

<script type="text/javascript">
$(document).ready(function () {        
    $("#SelectDate").blur(function () {
        $("#SelectDate").datepicker("hide");
    });
    $("#ButtonStatisticsSearchTrips").focus();

});   

Answer 28

यह स्मार्टफोन और टैबलेट के लिए वास्तव में महत्वपूर्ण है क्योंकि एक इनपुट फोकस होने पर कीबोर्ड ऊपर आता है। मैंने यही किया है, इस इनपुट को div की शुरुआत में जोड़ें:

<input type="image" width="1px" height="1px"/>

आकार के साथ काम नहीं करता है 0px। मुझे लगता है कि यह एक वास्तविक पारदर्शी छवि के साथ और भी बेहतर है, .pngया.gif लेकिन मैं प्रयास नहीं किया है।

IPad में अब तक काम करना ठीक है।

Answer 29

आप इसे जोड़ सकते हैं:

...

dlg.dialog({ autoOpen:false,
modal: true, 
width: 400,
open: function(){                  // There is new line
  $("#txtStartDate").focus();
  }
});

...

Comments

वह पूछ रहा है कि फोकस को कैसे रोका जाए , फोकस को न जोड़ें।

— CBarr

Answer 30

पहले इनपुट के रूप में: <input type="text" style="position:absolute;top:-200px" />