প্রথম পাঠ্যবক্সে ফোকাস সেট করা থেকে jQuery UI ডায়ালগটি প্রতিরোধ করুন

156

যখন কোনও ব্যবহারকারী কোনও লিঙ্ক ক্লিক করে তখন আমি প্রদর্শনের জন্য একটি jQuery UI মডেল ডায়ালগ সেটআপ করেছি। সেই কথোপকথন ডিভি ট্যাগে দুটি পাঠ্যবাক্স রয়েছে (আমি কেবল সংক্ষিপ্তসার জন্য 1 টির জন্য কোডটি দেখাই) এবং এটি একটি jQuery UI তারিখপিকার পাঠ্যবক্সে রূপান্তরিত হয় যা ফোকাসে প্রতিক্রিয়া জানায়।

সমস্যাটি হ'ল jQuery UI ডায়ালগ ('ওপেন') একরকম ফোকাস করার জন্য প্রথম পাঠ্যবাক্সটিকে ট্রিগার করে, যা তত্ক্ষণাত ডেটপিকার ক্যালেন্ডারটি খোলার জন্য ট্রিগার করে।

সুতরাং আমি ফোকাসটি স্বয়ংক্রিয়ভাবে ঘটে যাওয়া থেকে রোধ করার একটি উপায় অনুসন্ধান করছি।

<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>
javascript  jquery  jquery-ui 
— slolife
সূত্র
এটি এমনকি একটি চিত্র ফোকাস সেট করা হবে! উভয়ই নিয়মিত <img> ট্যাগ - পাশাপাশি <ইনপুট টাইপ = চিত্র>
— সাইমন_উইভার

উত্তর:

78

jQuery UI 1.10.0 চেঞ্জলগের টিকিট 4731 স্থির হিসাবে তালিকাবদ্ধ করে ।

দেখে মনে হচ্ছে ফোকাসসিলিটর কার্যকর করা হয়নি তবে পরিবর্তে বিভিন্ন উপাদানগুলির জন্য একটি ক্যাসকেডিং অনুসন্ধান ব্যবহৃত হয়েছিল। টিকিট থেকে:

[অটোফোকাস] দিয়ে শুরু করে অটোফোকাস প্রসারিত করুন, তারপরে: ট্যাবযোগ্য সামগ্রী, তারপরে বোতামপেন, তারপরে বোতামটি বন্ধ করুন, তারপরে কথোপকথন

সুতরাং, autofocusবৈশিষ্ট্যের সাথে একটি উপাদান চিহ্নিত করুন এবং এটি সেই উপাদান যা ফোকাস পাওয়া উচিত:

<input autofocus>

ইন ডকুমেন্টেশন , ফোকাস যুক্তিবিজ্ঞান ব্যাখ্যা করা হয় (ঠিক সূচীপত্র অধীনে, শিরোনাম 'ফোকাস' অধীনে):

একটি ডায়ালগ খোলার পরে, ফোকাসটি স্বয়ংক্রিয়ভাবে প্রথম আইটেমটিতে স্থানান্তরিত হয় যা নিম্নলিখিতগুলির সাথে মেলে:

  1. ডায়ালগের মধ্যে প্রথম উপাদানটি autofocusবৈশিষ্ট্য সহ
  2. :tabbableকথোপকথনের সামগ্রীর মধ্যে প্রথম উপাদান
  3. :tabbableকথোপকথনের বোতামের মধ্যে প্রথম উপাদান
  4. কথোপকথনের ক্লোজ বোতাম
  5. সংলাপ নিজেই
— slolife
সূত্র
ডাউনটা কিসের জন্য? যদি এটি ছিল কারণ আমি স্থির সংস্করণ হিসাবে 1.9 তালিকাভুক্ত করেছি, তবে টিকিটের সাথে মেলে আমি 1.10 এ আপডেট হয়েছি।
— স্লোলাইফ
1
আমি ডায়লগের জন্য jquery-ui 1.10 নথিটি দেখছি, এবং আমি এটি দেখছি না। আমি এপিআইতে "ফোকাসশীলতা" অনুসন্ধান করেছি এবং এটি সেখানে নেই।
— পল টমলিন
3
স্ক্রিন বন্ধ থাকা যে কোনও উপাদানকে ফোকাস সেট করা উইন্ডোটিকে উপরে বা নীচে নীচে স্ক্রোল করে এবং যখন উইন্ডো ফোকাস পায় কেবল তখনই ডায়ালগ খোলা থাকে না this যদি আমি "উপাদানটি পরিদর্শন করতে" এবং তারপরে ডকুমেন্ট উইন্ডোতে ফিরে ক্লিক করে ফায়ারব্যাগ ব্যবহার করি তবে আমার উইন্ডোটি jQuery-UI এর যে কোনও উপাদানটির উপর দৃষ্টি নিবদ্ধ করবে তার উপর বা নীচে স্ক্রল করে। প্রশ্নটি কী উপাদানটি ফোকাস পায় তা চয়ন করবেন না, তবে কীভাবে ফোকাস প্রতিরোধ করবেন । ফোকাস করতে আলাদা উপাদান নির্বাচন করা সমস্যার সমাধান করবে না।
— ভ্লাদিমির কর্নিয়া
4
JQuery UI এই 'স্থির' হিসাবে বিবেচনা করে এমন ধারণাটি পাগল। সমাধানটি হ'ল কোনও অটোফোকসিং যুক্তি সম্পূর্ণরূপে অপসারণ করা । আমি আপনাকে একটি ডায়ালগ খুলতে বলেছি, কোনও ইনপুটটিতে ফোকাস না করে। খুব বিরক্তিকর.
— এজেবি
2
প্রথমত, আমি প্রথম ইনপুট উপরে একটি ইনপুট ডাব্লু / টাইপ = "লুকানো" যুক্ত করেছি এবং এতে অটোফোকস বৈশিষ্ট্য যুক্ত করেছি। এটির অর্থ যা বোঝায় তার অর্থ এটি নয় তবে এটি এই সমস্যার সমাধানের জন্য কাজ করে।
— জিঙ্গলেস্তুলা
77

এটির উপরে একটি লুকানো স্প্যান যুক্ত করুন, পরম অবস্থানের মাধ্যমে এটি লুকিয়ে রাখতে ui-helper-লুকানো-অ্যাক্সেসযোগ্য ব্যবহার করুন। আমি জানি আপনি সেই শ্রেণিটি করেছেন কারণ আপনি jquery-ui থেকে ডায়ালগ ব্যবহার করছেন এবং এটি jquery-ui তে।

<span class="ui-helper-hidden-accessible"><input type="text"/></span>
— প্যাট্রিক লি স্কট
সূত্র
1
চারদিকে দুর্দান্ত কাজ কোনও জেএস প্রয়োজন নেই, লেআউট পরিবর্তন করবেন না, এবং জ্যাকোয়ারি ইউআই স্থানীয়ভাবে এটি সমর্থন করে।
— স্টিপ
সম্মত হন, চারপাশে দুর্দান্ত কাজ। লুকানো-অ্যাক্সেসযোগ্য ক্লাস সম্পর্কে জানতে পেরেও দুর্দান্ত! ধন্যবাদ !!
— ব্যবহারকারী 1055761
4
এটি সহায়ক প্রযুক্তি (উদাহরণস্বরূপ স্ক্রিন পাঠক) ব্যবহার করে লোকেদের জন্য সমস্যা সৃষ্টি করে
— rink.attendant.6
1
@ rink.attendant.6 কোন সমস্যা?
— oxfn
আশ্চর্যজনক সমাধান
— পেড্রো কোয়েলহো
63

JQuery UI> = 1.10.2 এ, আপনি _focusTabbableএকটি প্লাসবো ফাংশন দ্বারা প্রোটোটাইপ পদ্ধতিটি প্রতিস্থাপন করতে পারেন :

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

বেহালা

এটি dialogম্যানুয়ালি প্রতিটি সম্পাদনা করার প্রয়োজন ছাড়াই পৃষ্ঠার সমস্তগুলিকে প্রভাবিত করবে ।

আসল ফাংশনটি autofocusঅ্যাট্রিবিউট / tabbableএলিমেন্ট / বা ডায়ালগটিতে ফিরে আসার সাথে প্রথম উপাদানটিতে ফোকাস সেট করা ছাড়া কিছুই করে না । যেহেতু এর ব্যবহারটি কেবলমাত্র একটি উপাদানের উপর ফোকাস সেট করছে তাই এটি দ্বারা প্রতিস্থাপনে কোনও সমস্যা হবে না noop।

— ফ্যাব্রেসিও ম্যাট
সূত্র
7
ঘন্টা এবং ঘন্টা এবং ঘন্টা এবং ঘন্টা এই জ্বলন্ত। আমার ক্লায়েন্ট আপনাকে ধন্যবাদ।
— ল্যামার্যান্ট
1
এই উত্তর হওয়া উচিত!
— ব্রিয়ানসোল
2 দিন এই সমাধানগুলি অনুসন্ধান করেছে ... আর কিছুই কাজ করেনি ... অনেক অনেক ধন্যবাদ!
— Legionar
1
সতর্কতা: ডায়ালগটি পপ আপ হয়ে গেলে, এস্কেপ কী টিপলে ডায়ালগটি বন্ধ হবে না (যতক্ষণ না আপনি ডায়ালগটি ফোকাস করবেন)।
— রবার্ট
1
@ রবার্ট, এটির পরিবর্তে এটির পরিবর্তে $.noopসক্রিয় ডায়ালগটি নোট করে এমন একটি ফাংশন দিয়ে প্রতিস্থাপন করুন, তারপরে একটি গ্লোবাল কী ইভেন্ট হ্যান্ডলার নিবন্ধ করুন যা ESCযদি সেখানে থাকে তবে 'সক্রিয়' ডায়ালগটি বাধা দেয় এবং বন্ধ করে দেয়।
— পারকিনস
28

JQuery UI 1.10.0 থেকে শুরু করে আপনি HTML5 বৈশিষ্ট্য অটোফোকাস ব্যবহার করে কোন ইনপুট উপাদানটিতে ফোকাস রাখতে হবে তা চয়ন করতে পারেন ।

আপনাকে যা করতে হবে তা হ'ল ডায়ালগ বাক্সে আপনার প্রথম ইনপুট হিসাবে একটি ডামি উপাদান তৈরি করতে হবে। এটি আপনার জন্য ফোকাস শোষণ করবে।

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

এটি ফেব্রুয়ারী 7, 2013 এ Chrome, ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরার (সমস্ত সর্বশেষ সংস্করণ) এ পরীক্ষা করা হয়েছে।

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

— silkfire
সূত্র
27

আমি নীচের কোডটি খোলার জন্য 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 একটি workaround হিসাবে কাজ করে।

1
টেবিনডেক্স = -1 আমাকে পাঠ্যবক্সে ট্যাবিং করা থেকে বিরত রাখবে না?
— স্লোলাইফ
2
গবেষণার জন্য ধন্যবাদ। এখন আমি জানি যে এটি আসল কোড যা এটি করছে। আমি এই অটো-ফোকাসটি অক্ষম করার জন্য একটি বিকল্প যুক্ত করতে jQuery UI টিমকে একটি পরামর্শ দিতে পারি।
— স্লোলাইফ
3
@ স্লোলাইফ - সত্যই এই পুরানো থ্রেডটি পুনরুত্থিত করার জন্য দুঃখিত, তবে সেই টিকিটটি বলেছে যে ফিক্সটি ( focusSelectorবিকল্পটি) jQueryUI 1.8 তে থাকার কথা, এবং আমরা এখন 1.8.13 এ রয়েছি এবং আমি jQueryUI ডায়ালগ ডক্সে দেখছি না । এই কি হয়েছে?
— টম হামিং
কিছু মনে করো না. আমি পরিবর্তনের ইতিহাসে "মাইলস্টোন টিবিডি থেকে 1.8 এ পরিবর্তিত" দেখেছি এবং লক্ষ্য করেছি না যে এটি আসলে শীর্ষে 1.9 বলে।
— টম হামিং
আমারও একই সমস্যা রয়েছে, আমার কর্মক্ষেত্রটি
— চিহ্নিত করুন
15

চারপাশে খেলার সময় সবেমাত্র এটিকে বুঝেছি।

আমি এই সমাধানগুলি ফোকাস অপসারণ করার জন্য খুঁজে পেয়েছি, কারণ ESC ডায়ালগটিতে যাওয়ার কীটি কাজ বন্ধ করে দেয় (অর্থাত্ ডায়ালগটি বন্ধ করুন)।

যদি ডায়ালগটি খোলে এবং আপনি অবিলম্বে টিপুন ESC , এটি ডায়ালগটি বন্ধ করবে না (যদি আপনি এটি সক্ষম করে থাকেন), কারণ ফোকাসটি কোনও গোপন ক্ষেত্র বা কোনও কিছুর উপরে রয়েছে এবং এটি কীপ্রেসের ইভেন্টগুলি পাচ্ছে না।

আমি যেভাবে এটি স্থির করেছিলাম তা হল প্রথম ক্ষেত্র থেকে ফোকাসটি সরিয়ে দেওয়ার জন্য এটি উন্মুক্ত ইভেন্টে যুক্ত করা:

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

এটি ডায়লগ বাক্সটিতে দৃষ্টি নিবদ্ধ করে যা দৃশ্যমান নয় এবং তারপরে ESCকীটি কাজ করে।

— রব ডোনভান
সূত্র
3
এটি একমাত্র কার্যকরী সমাধান বলে মনে হচ্ছে, এর মধ্যে অকেজো এইচটিএমএল যুক্ত করা, ট্যাবিনডেক্স মুছে ফেলা বা ইসি কীটি ভাঙ্গা অন্তর্ভুক্ত নয়।
— বোজন বেদারাč
10

ইনপুটটির ট্যাবইন্ডেক্স -1 এ সেট করুন এবং তারপরে আপনার প্রয়োজন পরে ট্যাবইন্ডেক্সটি পুনরুদ্ধার করতে ডায়ালগ.ওপেন সেট করুন:

$(function() {
    $( "#dialog-message" ).dialog({
        modal: true,
        width: 500,
        autoOpen: false,
        resizable: false,
        open: function()
        {
            $( "#datepicker1" ).attr("tabindex","1");
            $( "#datepicker2" ).attr("tabindex","2");
        }
    });
});
— লাল চত্বর
সূত্র
4
টেবিনডেক্স = -1 আমাকে পাঠ্যবক্সে ট্যাবিং করা থেকে বিরত রাখবে না?
— স্লোলাইফ
1
ডায়লগটি প্রদর্শিত হওয়ার পরে আপনি ট্যাবইন্ডেক্সটি সেট করতে একটি সেটটাইমআউট ব্যবহার করতে পারেন
— পুনরায় স্পেসকেয়ার করুন
10

আমার কার্যনির্বাহী:

open: function(){
  jQuery('input:first').blur();
  jQuery('#ui-datepicker-div').hide();
},
— টমাস
সূত্র
+1 টি। :firstনির্বাচক ব্যবহার করে বা .first()এফএফ / ক্রোম / আইই9 তে কবজির মতো কাজ করে। dialogopenবাঁধাইয়ের মধ্যে এটি নিক্ষেপ করাও কাজ করে।
— নিকব
এই একজন আমাকে সেখানে পেয়েছে। আমার ব্যতীত, আমার কথোপকথনের কোনও ইনপুট ছিল না এবং প্রথম লিঙ্কটি ফোকাস পাচ্ছিল ... তাই আমি আমার jQuery ডায়ালগটিতে এই বিকল্পটি যুক্ত করেছি:open: function(){ $('a').blur(); // no autofocus on links }
— মার্কাস
8

আমার কাছে এমন সামগ্রী ছিল যা সংলাপের চেয়ে দীর্ঘ ছিল longer খোলা অবস্থায়, ডায়ালগটি প্রথম দিকে স্ক্রোল করবে: তলদেশে যা নীচে ছিল। এই ছিল আমার ফিক্স।

$("#myDialog").dialog({
   ...
   open: function(event, ui) { $(this).scrollTop(0); }
});
— thetoolman
সূত্র
এটি আমার পক্ষে কাজ করেছে তবে আমি $('...').blur();স্ক্রোলিংয়ের পরিবর্তে ব্যবহার করেছি ।
— জবা
4
আমার বিষয়বস্তুটিও খুব দীর্ঘ ছিল। অস্পষ্ট নির্বাচন নির্বাচন সরিয়ে ফেলেছে, তবে ডায়লগটি নীচে স্ক্রোল করে রেখেছিল। স্ক্রোলটপ সামগ্রীতে শীর্ষে স্ক্রোল করে তবে নির্বাচনটি ছেড়ে যায়। আমি using ('...') ব্যবহার করে শেষ করেছি bl ব্লার (); $ (এই) .scrollTop (0); চ্যাম্পের মতো কাজ করেছিল
7

সাধারণ কাজ

কেবল ট্যাবিনডেক্স = 1 দিয়ে একটি অদৃশ্য উপাদান তৈরি করুন ... এটি ডেটপিকারকে ফোকাস করবে না ...

যেমন .:

<a href="" tabindex="1"></a>
...
Here comes the input element
— অ্যান্ডি
সূত্র
আই 9 এবং ফায়ারফক্সে সূক্ষ্মভাবে কাজ করে তবে সাফারি / ক্রোম নয়।
— tusau
3

এখানে 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 তে ফোকাস হারাবে না তা নিশ্চিত করার জন্য কিছু অতিরিক্ত কোড যুক্ত করি।

উপাদানগুলিতে অটোমোপ্লিট প্রয়োগ করতে আমরা এখানে কোডটি ব্যবহার করি:

$.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;
}
2

পরিবর্তে ক্লোজ বোতামটি ফোকাস করার জন্য আপনি এই বিকল্পটি সরবরাহ করতে পারেন।

.dialog({
      open: function () {
              $(".ui-dialog-titlebar-close").focus();
            }
   });
— জে দুবল
সূত্র
1

এটি ব্রাউজারের আচরণ হতে পারে jQuery প্লাগইন ইস্যু নয়। আপনি পপআপটি খোলার পরে প্রোগ্রামটিমেটিকভাবে ফোকাসটি সরিয়ে দেওয়ার চেষ্টা করেছেন?

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

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

    return false;
});

এটি পরীক্ষা করা হয়নি তবে ঠিক কাজ করা উচিত।

— RaYell
সূত্র
1
দুঃখের বিষয় এই কাজ করে না। নিশ্চিত নয় যে এটি কোনও আইই জিনিস, বা কোনও জেকারি ইউআই জিনিস কিনা। আপনি যদি প্রোগ্রামটিকে অন্য কোনও দিকে ফোকাসটি সরান এমনকি ক্যালেন্ডার খোলা থাকে।
— প্যাট্রিসিয়া
1

আমি একই সমস্যাটি ডেটপিকারের আগে খালি ইনপুট .ুকিয়ে সমাধান করেছি এবং প্রতিবার ডায়ালগটি খোলা থাকলে ফোকাসটি চুরি করে। এই ইনপুটটি ডায়ালগের প্রতিটি খোলার উপরে লুকানো থাকে এবং আবার বন্ধ হয়ে দেখানো হয়।

— ম্যানুয়েল লিউনবার্গার
সূত্র
1

ঠিক আছে, এটি দুর্দান্ত যে কেউ আপাতত সমাধানটি খুঁজে পায় নি, তবে দেখে মনে হচ্ছে আপনার কাছে আমার কাছে কিছু আছে। খারাপ খবরটি হ'ল ডায়ালগটি কোনও ইনপুট এবং লিঙ্কগুলির অভ্যন্তরে না থাকলেও যে কোনও ক্ষেত্রে ফোকাস গ্রহন করে। আমি কথোপকথনটিকে একটি সরঞ্জামদণ্ড হিসাবে ব্যবহার করি এবং অবশ্যই মূল উপাদানটিতে ফোকাস থাকা দরকার। এখানে আমার সমাধান:

ব্যবহার অপশন [অটোপেন: মিথ্যা]

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

সংলাপটি অদৃশ্য হওয়ার সময়, ফোকাসটি কোথাও সেট করা হয়নি এবং আসল জায়গায় থাকবে stay এটি কেবল একটি সরল পাঠ্য সহ টুলটিপসের জন্য কাজ করে তবে আরও কার্যকর ক্রিয়াকলাপগুলির জন্য পরীক্ষা করা হয় না যেখানে খোলার মুহুর্তে ডায়ালগটি দৃশ্যমান হওয়া গুরুত্বপূর্ণ। সম্ভবত যে কোনও ক্ষেত্রে ভাল কাজ করবে।

আমি বুঝতে পারি যে আসল পোস্টটি কেবলমাত্র প্রথম উপাদানটির দিকে দৃষ্টি নিবদ্ধ করা এড়াতে হয়েছিল তবে আপনি সহজেই সিদ্ধান্ত নিতে পারেন যে ডায়লগটি খোলার পরে ফোকাসটি কোথায় হওয়া উচিত (আমার কোডের পরে)।

আইই, এফএফ এবং ক্রোমে পরীক্ষিত।

আশা করি এটি কারও সাহায্য করবে।

— রুপকথার বিরাটকায় পক্ষিবিশেষ
সূত্র
1

আমি একই সমস্যা আছে। যখন বৈধতা ব্যর্থ হয় তখন আমি একটি ত্রুটি ডায়লগ খুলি এবং ফ্লুগান তার উত্তরে যেমন এটি দেখায় ঠিক তেমন এটি মনোযোগ আকর্ষণ করে । সমস্যাটি হ'ল ডায়ালগের অভ্যন্তরে কোনও উপাদান ট্যাবযোগ্য না হলেও ডায়ালগটি নিজেই কেন্দ্রীভূত। এখানে jquery-ui-1.8.23 s 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);
};
— ছাপ
সূত্র
এটি ডায়ালগ () -এ 'ডায়লগক্লাস' বিকল্পটি ব্যবহার করে এবং তারপরে উপরের পরিবর্তনগুলি দ্বারা: নির্দিষ্ট ক্লায়েন্টকে প্রভাবিত করার জন্য বাড়ানো যেতে পারে: আপনার শ্রেণি অন্তর্ভুক্ত করতে ফিল্টার নয়। উদাহরণস্বরূপ: না (.ui- ডায়ালগ.মিডায়ালগক্লাস)
— অ্যান্ড্রু মার্টিনেজ
1

আমি চারপাশে অন্য একটি সমস্যা কিন্তু একই কারণের জন্য খুঁজছিলাম। বিষয়টি হ'ল ডায়লগটি <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>ফোকাস পায় কিন্তু তারপর লুকানো হয়। সুতরাং সামগ্রিক প্রভাব হ'ল কাঙ্ক্ষিত প্রভাব।

আমি জানি এটি একটি পুরানো থ্রেড তবে ইউআই ডক্স হিসাবে এটির কোনও সমাধান নেই। এটির জন্য কাজ করার জন্য ঝাপসা বা ফোকাসের প্রয়োজন নেই। এটি সবচেয়ে মার্জিত কিনা তা নিশ্চিত নন Not তবে এটি কেবল বোঝার এবং কারও কাছে ব্যাখ্যা করা সহজ।

— MikeF
সূত্র
1

যদি আপনার কেবল জ্যাকুরি ডায়ালগ আকারে একটি ক্ষেত্র থাকে এবং এটির জন্য ডেটপিকারের প্রয়োজন হয় তবে বিকল্পভাবে, আপনি ডায়ালগের শিরোনাম বারে ডায়লগ ক্লোজ (ক্রস) বোতামটিতে ফোকাস সেট করতে পারেন :

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

এই কলটি পরে ডায়লগ শুরু করা হয়েছিল, যেমন:

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

কারণ ক্লোজ বোতামটি .dialog()ডাকা হওয়ার পরে রেন্ডার করা হয় ।

— মিখাইল-T
সূত্র
1

আপনি যদি ডায়লগ বোতাম ব্যবহার করছেন তবে কেবল একটি বোতামের জন্য 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>
স্নিপেট প্রসারিত করুন

— স্যাম
সূত্র
0

আমি একই সমস্যা পেয়েছি।

আমি যে কাজটি করেছি তা হ'ল ডায়ালগ ধারকটির শীর্ষে ডামি পাঠ্যবাক্স যুক্ত করা।

<input type="text" style="width: 1px; height: 1px; border: 0px;" />
— TTCG
সূত্র
0

উল্লিখিত হিসাবে, এটি jQuery UI সহ একটি পরিচিত বাগ এবং এটি খুব শীঘ্রই সংশোধন করা উচিত। তখন পর্যন্ত...

এখানে অন্য বিকল্প রয়েছে, সুতরাং আপনাকে ট্যাবিনডেক্সের সাথে গোলযোগ করতে হবে না:

ডায়ালগ বক্সটি না খোলা পর্যন্ত ডেটপিকারকে অস্থায়ীভাবে অক্ষম করুন:

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

আমার জন্য কাজ কর.

সদৃশ প্রশ্ন: ডায়ালগ খোলার প্রথম ফর্ম ইনপুটটি কীভাবে ঝাপসা করবেন

— BMiner
সূত্র
0

পূর্ববর্তী কয়েকটি উত্তরের উপর প্রসারিত করতে (এবং আনুষাঙ্গিক ডেটপিকারের দিকটি উপেক্ষা করে), আপনি যদি focus()কথোপকথনটি খোলার সময় ইভেন্টটিকে প্রথম ইনপুট ক্ষেত্রে ফোকাস করা থেকে বিরত করতে চান তবে এটি চেষ্টা করুন:

$('#myDialog').dialog(
    { 'open': function() { $('input:first-child', $(this)).blur(); }
});
— nickb
সূত্র
0

আমার অনুরূপ সমস্যা হয়েছিল এবং খোলার পরে ডায়লগটিতে ফোকাস করে এটি সমাধান করেছি:

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?)

তবে আমার ক্ষেত্রে প্রথম উপাদানটি অ্যাঙ্কর, সুতরাং আমি জানি না যে আপনার ক্ষেত্রে ডেটপিকারটি খোলা হবে কিনা।

সম্পাদনা: কেবল আইই তে কাজ করে

— daniloquio
সূত্র
0

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();
— user1443069
সূত্র
0

jQuery 1.9 প্রকাশিত হয়েছে এবং সেখানে কোনও ঠিক হয়ে যায় না। প্রস্তাবিত কয়েকটি পদ্ধতির দ্বারা প্রথম পাঠ্য বাক্সটির ফোকাস প্রতিরোধের চেষ্টা 1.9-এ কাজ করছে না। আমি মনে করি যে কারণে ডায়ালগের পাঠ্য বাক্সটি ইতিমধ্যে ফোকাস অর্জন করেছে এবং এর নোংরা কাজটি করেছে তত্ক্ষণাত ফোকাসকে অস্পষ্ট করার বা ফোকাস স্থানান্তরিত করার পদ্ধতিগুলি বোধ করার কারণ রয়েছে।

আমি এপিআই ডকুমেন্টেশনে এমন কোনও কিছুই দেখতে পাচ্ছি না যা আমাকে মনে করে যে প্রত্যাশিত কার্যকারিতার দিক থেকে কিছু পরিবর্তন হয়েছে। একটি ওপেনার বোতাম যুক্ত করার জন্য বন্ধ ...

— pixelda
সূত্র
JQuery টিকিট অনুযায়ী এখন ঠিক করা হয়েছে 1.10: bugs.jqueryui.com/ticket/4731
— স্লাইফ
0

আমারও একই সমস্যা ছিল আমার পৃষ্ঠায় প্রথম ইনপুটটি হল jQuery UI ক্যালেন্ডার সহ পাঠ্য বাক্স। দ্বিতীয় উপাদানটি হ'ল বোতাম। যেহেতু তারিখটির ইতিমধ্যে মূল্য রয়েছে তাই আমি বোতামটিতে ফোকাস সেট করেছি তবে প্রথমে পাঠ্য বাক্সে অস্পষ্টতার জন্য ট্রিগার যুক্ত করব। এটি সমস্ত ব্রাউজারগুলিতে এবং সম্ভবত 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();

});

— user1698635
সূত্র
0

স্মার্টফোন এবং ট্যাবলেটগুলির জন্য এটি সত্যই গুরুত্বপূর্ণ কারণ যখন কোনও ইনপুটটির ফোকাস থাকে তখন কীবোর্ডটি উপস্থিত হয়। এটিই আমি করেছি, ডিভের শুরুতে এই ইনপুটটি যুক্ত করুন:

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

আকার নিয়ে কাজ করে না 0px। আমি অনুমান করি সত্যিকারের স্বচ্ছ চিত্রের সাথে এটি আরও ভাল, হয় .pngবা হয় .gifতবে চেষ্টা করি নি।

এখন পর্যন্ত আইপ্যাডে ঠিকঠাক কাজ করছি।

— অ্যাঞ্জেল আরবেটেটা
সূত্র
-1

আপনি এটি যোগ করতে পারেন:

...

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

...

— খোফিডিন ওফিড
সূত্র
3
তিনি জিজ্ঞাসা করছেন কীভাবে ফোকাস রোধ করবেন, ফোকাস যুক্ত করবেন না।
— সিবিার
-2

প্রথম ইনপুট হিসাবে: <input type="text" style="position:absolute;top:-200px" />

— user2816796
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.