ป้องกันกล่องโต้ตอบ jQuery UI จากการตั้งโฟกัสไปยังกล่องข้อความแรก

ฉันตั้งค่ากล่องโต้ตอบโมดอล jQuery UI เพื่อแสดงเมื่อผู้ใช้คลิกลิงก์ มีสอง textboxes (ฉันเพียงแสดงรหัสสำหรับ 1 เพื่อความกะทัดรัด) ในแท็ก div dialog นั้นและมันเปลี่ยนเป็น jQuery UI DatePicker textbox ที่ตอบสนองต่อการโฟกัส

ปัญหาคือกล่องโต้ตอบ jQuery UI ('เปิด') ทำให้กล่องข้อความแรกมีโฟกัสซึ่งจะกระตุ้นให้ปฏิทิน datepicker เปิดขึ้นทันที

ดังนั้นฉันกำลังมองหาวิธีที่จะป้องกันไม่ให้โฟกัสเกิดขึ้นโดยอัตโนมัติ

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

jQuery UI 1.10.0 Changelogแสดงรายการตั๋ว 4731ว่ากำลังแก้ไข

ดูเหมือนว่า focusSelector ไม่ได้ถูกนำมาใช้ แต่การค้นหาเรียงซ้อนสำหรับองค์ประกอบต่าง ๆ ถูกนำมาใช้แทน จากตั๋ว:

ขยายโฟกัสอัตโนมัติโดยเริ่มจาก [โฟกัสอัตโนมัติ] จากนั้น: เนื้อหาที่เป็นแท็บจากนั้นตามด้วยปุ่มกดแล้วปิดปุ่มจากนั้นโต้ตอบ

ดังนั้นให้ทำเครื่องหมายองค์ประกอบด้วยautofocusแอตทริบิวต์และนั่นคือองค์ประกอบที่ควรได้รับการโฟกัส:

<input autofocus>

ในเอกสารอธิบายตรรกะโฟกัสจะอธิบาย (ใต้สารบัญภายใต้ชื่อ 'โฟกัส'):

เมื่อเปิดกล่องโต้ตอบโฟกัสจะถูกย้ายไปยังรายการแรกที่ตรงกับสิ่งต่อไปนี้โดยอัตโนมัติ:

1. องค์ประกอบแรกภายในกล่องโต้ตอบพร้อมautofocusแอตทริบิวต์
2. :tabbableองค์ประกอบแรกในเนื้อหาของกล่องโต้ตอบ
3. :tabbableองค์ประกอบแรกที่อยู่ภายในปุ่มกดของไดอะล็อก
4. ปุ่มปิดของกล่องโต้ตอบ
5. กล่องโต้ตอบตัวเอง

เพิ่มช่วงซ่อนเร้นด้านบนใช้ ui-helper-hidden-access เพื่อทำให้ซ่อนโดยการจัดตำแหน่งที่แน่นอน ฉันรู้ว่าคุณมีคลาสนั้นเพราะคุณใช้ไดอะล็อกจาก jquery-ui และอยู่ใน jquery-ui

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

ใน jQuery UI> = 1.10.2 คุณสามารถแทนที่_focusTabbableวิธีต้นแบบด้วยฟังก์ชั่นหลอก:

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

ซอ

สิ่งนี้จะส่งผลกระทบต่อทุกคนdialogในหน้าโดยไม่ต้องแก้ไขด้วยตนเอง

ฟังก์ชั่นดั้งเดิมไม่ทำอะไรเลยนอกจากตั้งค่าโฟกัสไปที่องค์ประกอบแรกด้วยautofocusแอตทริบิวต์ / tabbableelement / หรือกลับไปที่กล่องโต้ตอบ noopขณะที่การใช้งานเป็นเพียงการตั้งค่าการมุ่งเน้นไปที่องค์ประกอบควรจะมีปัญหาแทนที่มันโดยไม่มี

เริ่มต้นจาก jQuery UI 1.10.0 ท่านสามารถเลือกซึ่งองค์ประกอบเข้าที่จะมุ่งเน้นโดยใช้ HTML5 แอตทริบิวต์ ออโต้โฟกัส

สิ่งที่คุณต้องทำคือสร้างองค์ประกอบจำลองเป็นอินพุตแรกของคุณในกล่องโต้ตอบ มันจะดูดซับโฟกัสสำหรับคุณ

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

สิ่งนี้ได้รับการทดสอบใน Chrome, Firefox และ Internet Explorer (รุ่นล่าสุดทั้งหมด) ในวันที่ 7 กุมภาพันธ์ 2013

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

ฉันพบรหัสต่อไปนี้ฟังก์ชั่นโต้ตอบ 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 ทำงานเป็นวิธีแก้ปัญหา

เพิ่งคิดออกในขณะที่เล่นไปรอบ ๆ

ฉันพบกับโซลูชันเหล่านี้เพื่อลบโฟกัสทำให้ESCกุญแจหยุดทำงาน (เช่นปิดกล่องโต้ตอบ) เมื่อเข้าสู่กล่องโต้ตอบเป็นครั้งแรก

หากไดอะล็อกเปิดขึ้นและคุณกดทันทีESCมันจะไม่ปิดไดอะล็อก (หากคุณเปิดใช้งาน) เนื่องจากโฟกัสอยู่ในบางฟิลด์หรือบางสิ่งที่ซ่อนอยู่

วิธีที่ฉันแก้ไขคือการเพิ่มสิ่งนี้ในกิจกรรมที่เปิดอยู่เพื่อลบโฟกัสออกจากฟิลด์แรกแทน:

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

ชุดนี้มุ่งเน้นไปที่กล่องโต้ตอบซึ่งมองไม่เห็นจากนั้นใช้ESCงานคีย์

ตั้งค่า tabindex ของอินพุตเป็น -1 จากนั้นตั้งค่า dialog.open เพื่อเรียกคืน tabindex หากคุณต้องการในภายหลัง:

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

วิธีแก้ปัญหาของฉัน:

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

ฉันมีเนื้อหาที่ยาวกว่ากล่องโต้ตอบ เมื่อเปิดกล่องโต้ตอบจะเริ่มต้นที่: แท็บที่อยู่ด้านล่าง นี่คือการแก้ไขของฉัน

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

วิธีแก้ปัญหาง่าย ๆ :

เพียงแค่สร้างองค์ประกอบที่มองไม่เห็นด้วย tabindex = 1 ... สิ่งนี้จะไม่เน้น datepicker ...

เช่น.:

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

นี่คือโซลูชันที่ฉันติดตั้งหลังจากอ่านผ่านตั๋ว jQuery UI # 4731ซึ่งโพสต์โดย slolife เพื่อตอบกลับคำตอบอื่น (ตั๋วถูกสร้างโดยเขาเช่นกัน)

ขั้นแรกในวิธีใดก็ตามที่คุณใช้เพื่อนำการเติมข้อความอัตโนมัติไปใช้กับหน้าให้เพิ่มบรรทัดของรหัสต่อไปนี้:

$.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 และเพิ่มรหัสเพิ่มเติมบางส่วนเพื่อให้แน่ใจว่า textElement จะไม่โฟกัสใน IE 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;
}

คุณอาจให้ตัวเลือกนี้เพื่อโฟกัสปุ่มปิดแทน

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

นี่อาจเป็นพฤติกรรมของเบราว์เซอร์ที่ไม่ใช่ปัญหาปลั๊กอิน jQuery คุณลองลบโฟกัสโดยทางโปรแกรมหลังจากเปิดป๊อปอัปหรือไม่

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

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

    return false;
});

ยังไม่ได้ทดสอบ แต่ควรใช้ได้

ฉันต้องการแก้ไขปัญหาเดียวกันและแก้ไขโดยการใส่ค่าว่างก่อน datepicker ที่จะขโมยโฟกัสทุกครั้งที่เปิดกล่องโต้ตอบ ข้อมูลนี้ถูกซ่อนอยู่ในทุก ๆ การเปิดกล่องโต้ตอบและแสดงอีกครั้งเมื่อปิด

มันเยี่ยมมากที่ไม่มีใครพบวิธีแก้ปัญหาในตอนนี้ แต่ดูเหมือนว่าฉันมีบางอย่างสำหรับคุณ ข่าวดีก็คือว่ากล่องโต้ตอบคว้าโฟกัสในกรณีใด ๆ แม้ว่าจะไม่มีอินพุตและลิงก์อยู่ภายใน ฉันใช้กล่องโต้ตอบเป็นคำแนะนำเครื่องมือและต้องการโฟกัสอย่างแน่นอนในองค์ประกอบดั้งเดิม นี่คือทางออกของฉัน:

ใช้ตัวเลือก [autoOpen: false]

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

ในขณะที่มองไม่เห็นกล่องโต้ตอบโฟกัสไม่ได้ตั้งที่ใดก็ได้และอยู่ในสถานที่เดิม มันใช้งานได้กับคำแนะนำเครื่องมือที่มีเพียงข้อความธรรมดา แต่ไม่ได้ทดสอบสำหรับกล่องโต้ตอบที่ใช้งานได้มากกว่าซึ่งอาจเป็นเรื่องสำคัญที่จะต้องมีกล่องโต้ตอบปรากฏขึ้นในช่วงเวลาที่เปิด อาจจะทำงานได้ดีในทุกกรณี

ฉันเข้าใจว่าโพสต์ดั้งเดิมนั้นมีจุดประสงค์เพื่อหลีกเลี่ยงการมุ่งเน้นที่องค์ประกอบแรก แต่คุณสามารถตัดสินใจได้อย่างง่ายดายว่าการโฟกัสควรอยู่ที่ไหนหลังจากเปิดกล่องโต้ตอบ (หลังจากรหัสของฉัน)

ทดสอบใน IE, FF และ Chrome

หวังว่านี่จะช่วยใครซักคน

ในความคิดของฉันวิธีนี้ดีมาก:

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

พบที่นี่: ไม่สามารถลบการโฟกัสอัตโนมัติในกล่องโต้ตอบ UI

ฉันมีปัญหาที่คล้ายกัน ฉันเปิดกล่องโต้ตอบข้อผิดพลาดเมื่อตรวจสอบล้มเหลวและคว้ามันโฟกัสเช่นเดียวกับการแสดง Flugan ในของเขาคำตอบ ปัญหาคือแม้ว่าแท็บเล็ตในกล่องโต้ตอบจะไม่มีองค์ประกอบใด ๆ กล่องโต้ตอบจะยังคงโฟกัสอยู่ นี่คือรหัสดั้งเดิมที่ไม่ระบุขนาดจาก 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();

ความคิดเห็นคือพวกเขา!

นี่มันแย่จริงๆสำหรับฉันด้วยเหตุผลหลายประการ สิ่งที่น่ารำคาญที่สุดคือปฏิกิริยาแรกของผู้ใช้คือการกดปุ่ม Backspace เพื่อลบตัวอักษรตัวสุดท้าย แต่เขากลับได้รับแจ้งให้ออกจากหน้าเนื่องจากมีการกด Backspace นอกการควบคุมอินพุต

ฉันพบว่าวิธีแก้ปัญหาต่อไปนี้ใช้งานได้ดีสำหรับฉัน:

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

ฉันกำลังมองหาสิ่งที่แตกต่าง แต่เป็นสาเหตุเดียวกัน ปัญหาคือกล่องโต้ตอบตั้งโฟกัสไปที่แรกที่<a href="">.</a>พบ ดังนั้นหากคุณมีข้อความจำนวนมากในกล่องโต้ตอบและแถบเลื่อนปรากฏขึ้นคุณอาจมีสถานการณ์ที่แถบเลื่อนจะถูกเลื่อนไปที่ด้านล่าง ฉันเชื่อว่านี่ยังแก้ไขคำถามของคนแรก ถึงแม้ว่าคนอื่นจะทำเช่นกัน

แก้ไขง่ายเข้าใจง่าย <a id="someid" href="#">.</a> เป็นบรรทัดแรกใน div ไดอะล็อกของคุณ

ตัวอย่าง:

 <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 เอกสารนั้นไม่มีการแก้ไข สิ่งนี้ไม่จำเป็นต้องเบลอหรือโฟกัสไปที่การทำงาน ไม่แน่ใจว่าสง่างามที่สุดหรือไม่ แต่มันสมเหตุสมผลและอธิบายได้ง่ายสำหรับทุกคน

หากคุณมีเพียงหนึ่งฟิลด์ในรูปแบบของไดอะล็อก Jquery และเป็นฟิลด์ที่ต้องการ Datepicker หรือคุณสามารถตั้งค่าโฟกัสบนไดอะล็อกปุ่มปิด (ข้าม)ในแถบชื่อเรื่องของไดอะล็อก:

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

การเรียกไดอะล็อก AFTER นี้เริ่มต้นแล้วเช่น:

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

เพราะปุ่มปิดจะแสดงผลหลังจากที่.dialog()ถูกเรียก

หากคุณใช้ปุ่มโต้ตอบเพียงตั้งค่าแอ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>

ฉันมีปัญหาเดียวกัน

วิธีแก้ปัญหาที่ฉันทำคือเพิ่มกล่องข้อความจำลองที่ด้านบนของกล่องโต้ตอบ

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

ดังที่กล่าวมานี้เป็นข้อบกพร่องที่รู้จักกับ jQuery UI และควรได้รับการแก้ไขในไม่ช้า จนกระทั่ง...

นี่คือตัวเลือกอื่นดังนั้นคุณไม่ต้องยุ่งกับ tabindex:

ปิดใช้งาน datepicker ชั่วคราวจนกว่ากล่องโต้ตอบจะเปิดขึ้น:

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

ได้ผลสำหรับฉัน

คำถามที่ซ้ำกัน: วิธีการเบลออินพุตแบบแรกที่การเปิดไดอะล็อก

หากต้องการขยายคำตอบก่อนหน้านี้บางส่วน (และเพิกเฉยต่อมุมมอง datepicker เสริม) หากคุณต้องการป้องกันไม่ให้focus()เหตุการณ์โฟกัสฟิลด์อินพุตแรกเมื่อเปิดไดอะล็อกลองทำสิ่งนี้:

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

ฉันมีปัญหาที่คล้ายกันและแก้ไขได้โดยเน้นที่กล่องโต้ตอบหลังจากเปิด

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

แต่ในกรณีของฉันองค์ประกอบแรกคือสมอดังนั้นฉันไม่รู้ว่าในกรณีของคุณที่จะเปิด datepicker หรือไม่

แก้ไข: ใช้งานได้กับ IE เท่านั้น

ค้นหาใน 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();

jQuery 1.9 ถูกปล่อยออกมาและดูเหมือนจะไม่มีการแก้ไข ความพยายามในการป้องกันไม่ให้โฟกัสของกล่องข้อความแรกโดยวิธีการที่แนะนำบางวิธีไม่ทำงานใน 1.9 ฉันคิดว่าเนื่องจากวิธีการที่พยายามทำให้เบลอโฟกัสหรือย้ายโฟกัสเกิดขึ้นหลังจากกล่องข้อความในกล่องโต้ตอบได้รับโฟกัสแล้วและทำงานที่สกปรก

ฉันไม่เห็นสิ่งใดในเอกสาร API ที่ทำให้ฉันคิดว่ามีการเปลี่ยนแปลงอะไรในแง่ของการทำงานที่คาดหวัง ปิดเพื่อเพิ่มปุ่มเปิด ...

ฉันมีปัญหาที่คล้ายกัน ในหน้าแรกของฉันใส่เป็นกล่องข้อความที่มีปฏิทิน 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();

});   

สิ่งนี้สำคัญมากสำหรับสมาร์ทโฟนและแท็บเล็ตเพราะคีย์บอร์ดจะปรากฏขึ้นเมื่ออินพุตมีโฟกัส นี่คือสิ่งที่ฉันได้ทำเพิ่มข้อมูลนี้ที่จุดเริ่มต้นของ div:

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

0pxไม่ได้ทำงานกับขนาด ฉันเดาว่ามันจะดีกว่าด้วยภาพโปร่งใสจริง ๆ.pngหรือ.gifแต่ฉันไม่ได้ลอง

ทำงานได้ดีจนถึงขณะนี้ใน iPad

คุณสามารถเพิ่มสิ่งนี้:

...

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

...

เป็นอินพุตแรก: <input type="text" style="position:absolute;top:-200px" />