jQuery UI 대화 상자가 첫 번째 텍스트 상자에 초점을 설정하지 못하게하십시오.


156

사용자가 링크를 클릭하면 표시되도록 jQuery UI 모달 대화 상자를 설정했습니다. 해당 대화 상자 div 태그에는 두 개의 텍스트 상자 (간결하게 1 코드 만 표시)가 있으며 포커스에 반응하는 jQuery UI DatePicker 텍스트 상자로 변경되었습니다.

문제는 jQuery UI 대화 상자 ( 'open')가 어떻게 든 첫 번째 텍스트 상자에 포커스를 두도록 트리거 한 다음 날짜 선택 달력이 즉시 열립니다.

그래서 초점이 자동으로 발생하지 않도록하는 방법을 찾고 있습니다.

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

이미지에도 초점을 맞 춥니 다! 일반 <img> 태그와 <input type = image> 둘 다
Simon_Weaver

답변:


78

1.10.0 jQuery를 UI 변경 로그 나열 티켓 4731 고정되어있다.

focusSelector가 구현되지 않은 것처럼 보이지만 대신 다양한 요소에 대한 계단식 검색이 사용되었습니다. 티켓에서 :

[오토 포커스]로 시작한 다음 : 태 블러 블 컨텐츠, 버튼 창, 닫기 버튼, 대화 상자로 자동 초점 확장

따라서 요소를 autofocus속성으로 표시 하면 초점을 가져야하는 요소입니다.

<input autofocus>

에서 문서 , 초점 로직 (제목 '포커스'에서, 단지 목차에서) 설명 :

대화 상자를 열면 포커스가 다음과 일치하는 첫 번째 항목으로 자동 이동됩니다.

  1. autofocus속성이 있는 대화 상자의 첫 번째 요소
  2. :tabbable대화 상자 내용 의 첫 번째 요소
  3. :tabbable대화 상자의 버튼 창에 있는 첫 번째 요소
  4. 대화 상자의 닫기 버튼
  5. 대화 자체

공감 비란 무엇입니까? 수정 버전으로 1.9를 나열했기 때문에 티켓과 일치하도록 1.10으로 업데이트했습니다.
slolife

1
Dialog에 대한 jquery-ui 1.10 설명서를보고 있는데 보이지 않습니다. API에서 "focusSelector"를 검색했지만 거기에 없습니다.
Paul Tomblin

3
화면 밖에있는 요소에 포커스를 설정하면 창을 해당 요소로 위 또는 아래로 스크롤하며 이는 대화 상자가 열려있을뿐만 아니라 창에 포커스가있을 때마다 발생합니다. Firebug를 사용하여 "요소 검사"를 한 다음 문서 창에서 다시 클릭하면 jQuery-UI가 중점을 둔 요소로 창이 위 또는 아래로 스크롤됩니다. 문제는 초점을 맞출 요소를 선택하는 방법이 아니라 초점 을 방지 하는 방법 입니다. 집중할 다른 요소를 선택해도 문제가 해결되지 않습니다.
Vladimir Kornea

4
jQuery UI가 이것을 '고정 된'것으로 간주한다는 아이디어는 미쳤다. 수정은 자동 초점 로직을 모두 제거 하는 것 입니다. 입력에 중점을 두지 않고 대화 상자를 열도록 요청했습니다. 너무 짜증나.
AJB

2
fwiw, 나는 첫 번째 입력 위에 type = "hidden"이있는 입력을 추가하고 autofocus 속성을 추가했습니다. 그것은 당신이 생각하는 것을 의미하지는 않지만이 문제를 해결하는 데 효과적입니다.
jinglesthula

77

그 위에 숨겨진 범위를 추가하고 ui-helper-hidden-accessible을 사용하여 절대 위치로 숨기십시오. jquery-ui의 대화 상자를 사용하고 있으며 jquery-ui에 있기 때문에 클래스가 있다는 것을 알고 있습니다.

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

1
대단한 일. js가 필요하지 않고 레이아웃을 변경하지 않으며 jquery ui가 기본적으로 지원합니다.
steampowered

동의합니다. 숨겨진 접근 가능 클래스에 대해서도 알고 싶습니다. 감사!!
user1055761

4
보조 기술을 사용하는 사람들 (예 : 스크린 리더)
rink.attendant.6

1
@ rink.attendant.6 어떤 문제가 있습니까?
oxfn

놀라운 솔루션
Pedro Coelho

63

jQuery UI> = 1.10.2에서 _focusTabbable프로토 타입 메소드를 위약 함수로 바꿀 수 있습니다 .

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

깡깡이

이것은 모두에 영향을 미칩니다 dialog 각 페이지를 수동으로 편집 할 필요없이 페이지의 .

원래 함수는 autofocus속성 / tabbableelement / 를 사용하여 첫 번째 요소에 포커스를 설정 하거나 대화 상자 자체로 되돌아갑니다. 사용은 요소에 초점을 맞추는 것이므로 요소로 대체하는 데 아무런 문제가 없습니다 noop.


7
이 시간과 시간과 시간과 시간. 내 고객 감사합니다.
lamarant

1
이것이 답이되어야합니다!
briansol

2 일 동안이 솔루션을 검색했습니다. 다른 작업은 없었습니다 ... 감사합니다!
Legionar

1
경고 : 대화 상자가 나타나면 Esc 키를 눌러도 대화 상자가 닫히지 않습니다 (대화 상자에 초점을 맞출 때까지).
Robert

1
@Robert는을 대신하는 대신 $.noop활성 대화 상자를 기록하는 기능으로 대체 한 다음 ESC'active'대화 상자가 있으면 차단 하고 닫는 전역 키 이벤트 핸들러를 등록하십시오 .
퍼킨스

28

jQuery UI 1.10.0부터 HTML5 속성 autofocus를 사용하여 집중할 입력 요소를 선택할 수 있습니다 .

대화 상자에서 첫 번째 입력으로 더미 요소를 작성하기 만하면됩니다. 그것은 당신을 위해 초점을 흡수합니다.

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

2013 년 2 월 7 일 Chrome, Firefox 및 Internet Explorer (모든 최신 버전)에서 테스트되었습니다.

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


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은 해결 방법으로 작동합니다.


1
tabindex = -1이 텍스트 상자를 탭하지 못하게합니까?
slolife

2
연구 해 주셔서 감사합니다. 이제는 실제 코드임을 알고 있습니다. 이 자동 초점을 비활성화하는 옵션을 추가하기 위해 jQuery UI 팀에 제안 할 수 있습니다.
slolife

3
@ slolife-이 오래된 스레드를 부활시켜 죄송하지만 티켓은 수정 ( focusSelector옵션)이 jQueryUI 1.8에 있다고 가정하고 현재 1.8.13에 있으며 jQueryUI 대화 상자 에 표시되지 않습니다. . 이게 무슨 일이야?
Tom Hamming

신경 쓰지 마. 수정 기록에서 "Milestone이 TBD에서 1.8로 변경되었습니다."를 보았으며 실제로 맨 위에 1.9라고 표시되지 않았습니다.
Tom Hamming

나는 비슷한 문제는, 내 해결 방법은 여기에 설명되어있다 - stackoverflow.com/a/12250193/80002
마크

15

놀면서 이것을 알아 냈습니다.

초점을 제거하기 위해 이러한 솔루션을 찾았습니다. ESC 처음 대화 상자에 들어갈 때 키 작동이 중지되었습니다 (예 : 대화 상자 닫기).

대화 상자가 열리고 즉시 ESC 활성화되지 않은 경우 대화 상자가 닫히지 않습니다. 포커스가 숨겨진 필드 또는 다른 항목에 있고 키 누르기 이벤트가 발생하지 않기 때문입니다.

내가 고 쳤던 방법은 이것을 오픈 이벤트에 추가하여 첫 번째 필드에서 포커스를 제거하는 것이 었습니다.

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

이 대화 상자에 포커스를 설정하면 표시되지 않으며 ESC키가 작동합니다.


3
쓸모없는 HTML 추가, tabindex 제거 또는 ESC 키 손상을 포함하지 않는 유일한 작동 솔루션으로 보입니다.
보얀 베드 라치

10

입력의 tabindex를 -1로 설정 한 다음 나중에 필요한 경우 tabindex를 복원하도록 dialog.open을 설정하십시오.

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

4
tabindex = -1이 텍스트 상자를 탭하지 못하게합니까?
slolife

1
대화 상자가 표시된 후 setTimeout을 사용하여 tabindex를 다시 설정할 수 있습니다.
redsquare

10

내 해결 방법 :

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

+1. :first선택기를 사용 하거나 .first()FF / Chrome / IE9에서 참처럼 작동 합니다. dialogopen바인딩에 던져도 작동합니다.
nickb

이것도 저를 데려 왔습니다. 저를 제외하고는 대화 상자에 입력이 전혀 없었고 첫 번째 링크에 포커스 open: function(){ $('a').blur(); // no autofocus on links }
Marcus

8

대화 상자보다 긴 내용이있었습니다. 대화 상자가 열리면 맨 아래에있는 첫 번째 : tabbable과 대화합니다. 여기 내 수정이 있었다.

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

이것은 나를 위해 일했지만 $('...').blur();스크롤 대신 사용 했습니다.
Jawa

4
내 콘텐츠도 매우 길었습니다. 흐림 효과는 선택을 제거했지만 대화 상자를 맨 아래로 스크롤 한 상태로 두었습니다. scrollTop은 내용을 맨 위로 스크롤했지만 선택 항목을 남겼습니다. 나는 $ ( '...'). blur (); $ (this) .scrollTop (0); 챔피언처럼 일했다.

7

간단한 해결 방법 :

tabindex = 1로 보이지 않는 요소를 만들면 ... 날짜 선택기가 초점을 맞추지 않습니다 ...

예 :

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

ie9 및 firefox에서는 잘 작동하지만 사파리 / 크롬에서는 작동하지 않습니다.
tuseau

3

다음은 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의 "select"자동 완성 콜백을 재정의하고 일부 추가 코드를 추가하여 선택 후 IE 8에서 textElement가 포커스를 잃지 않도록합니다.

요소에 자동 완성을 적용하는 데 사용하는 코드는 다음과 같습니다.

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

그것을 테스트하지는 않았지만 정상적으로 작동합니다.


1
슬프게도 이것은 작동하지 않습니다. IE 또는 jquery UI인지 확실하지 않습니다. 그러나 프로그래밍 방식으로 다른 곳으로 초점을 이동하더라도 캘린더는 열린 상태로 유지됩니다.
Patricia

1

동일한 문제를 해결하고 대화 상자를 열 때마다 포커스를 훔치는 datepicker 앞에 빈 입력을 삽입하여 해결했습니다. 이 입력은 대화 상자를 열 때마다 숨겨져 닫히면 다시 표시됩니다.


1

글쎄, 아무도 해결책을 찾지 못했다는 것이 멋지지만, 나는 당신을 위해 무언가가있는 것처럼 보입니다. 나쁜 소식은 내부에 입력과 링크가 없어도 대화 상자가 포커스를 잡는다는 것입니다. 대화 상자를 도구 설명으로 사용하고 원래 요소에 초점을 유지해야합니다. 내 해결책은 다음과 같습니다.

옵션 사용 [autoOpen : false]

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

대화 상자가 보이지 않지만 포커스는 어디에도 설정되지 않고 원래 위치에 유지됩니다. 일반 텍스트만으로도 툴팁에서 작동하지만 시작 순간에 대화 상자를 표시하는 것이 더 중요한 기능성 대화 상자는 테스트하지 않았습니다. 아마 어떤 경우에도 잘 작동합니다.

원래 게시물은 첫 번째 요소에 초점을 맞추지 않기위한 것이지만 대화 상자를 연 후 (내 코드 후) 포커스가 어디에 있어야하는지 쉽게 결정할 수 있습니다.

IE, FF 및 Chrome에서 테스트되었습니다.

잘하면 이것은 누군가를 도울 것입니다.



1

비슷한 문제가 있습니다. 유효성 검사에 실패하면 오류 대화 상자를 열고 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();

의견은 그들입니다!

이것은 몇 가지 이유로 나에게 정말 나쁘다. 가장 성가신 것은 사용자의 첫 번째 반응은 마지막 문자를 삭제하기 위해 백 스페이스를 누르는 것이지만, 백 스페이스가 입력 컨트롤 외부에 닿기 때문에 페이지를 떠나라는 메시지가 나타납니다.

다음 해결 방법이 꽤 효과적이라는 것을 알았습니다.

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

이것은 .dialog ()의 'dialogClass'옵션을 사용하고 클래스를 포함하도록 위의 : not 필터를 변경하여 특정 대화 상자에만 영향을 미치도록 확장 할 수 있습니다. 예 : : not (.ui-dialog.myDialogClass)
Andrew Martinez

1

다른 문제가 있지만 동일한 원인을 찾고있었습니다. 문제는 대화 상자가 처음 <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 문서는 이것에 대한 해결책이 없습니다. 작동하기 위해 흐림이나 초점이 필요하지 않습니다. 그것이 가장 우아한 지 확실하지 않습니다. 그러나 누구에게나 설명하기 쉽고 이해하기 쉽습니다.


1

Jquery 대화 상자 형식의 필드가 하나만 있고 Datepicker가 필요한 필드 인 경우 대화 상자의 제목 표시 줄에서 대화 상자 닫기 (십자) 단추 에 초점을 설정할 수 있습니다 .

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

이 AFTER 대화 상자를 다음과 같이 초기화했습니다.

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

.dialog()가 호출 된 후 닫기 버튼이 렌더링되므로


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;" />

0

언급했듯이, 이것은 jQuery UI의 알려진 버그이며 비교적 빨리 수정해야합니다. 그때까지...

또 다른 옵션이 있으므로 tabindex를 망칠 필요가 없습니다.

대화 상자가 열릴 때까지 날짜 선택기를 일시적으로 비활성화하십시오.

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

나를 위해 작동합니다.

중복 질문 : 대화 상자 열기에서 첫 번째 양식 입력을 흐리게하는 방법


0

focus()대화 상자를 열 때 이벤트가 첫 번째 입력 필드에 초점을 맞추지 못하게하려면 이전 답변 중 일부를 확장하고 보조 날짜 선택기 측면을 무시하려면 다음을 수행하십시오.

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

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

그러나 제 경우에는 첫 번째 요소가 앵커이므로 날짜 선택기가 열린 상태인지 알 수 없습니다.

편집 : IE에서만 작동


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();

0

jQuery 1.9가 릴리스되었으며 수정 된 것으로 보이지 않습니다. 제안 된 방법 중 일부에 의해 첫 번째 텍스트 상자의 초점을 방지하려는 시도는 1.9에서 작동하지 않습니다. 대화 상자의 텍스트 상자가 이미 초점을 얻고 더러운 작업을 한 후에 초점을 흐리게하거나 초점 이동을 시도하는 방법이 필요합니다.

API 설명서에서 예상되는 기능 측면에서 변경된 내용이 있다고 생각되는 내용이 없습니다. 오프너 버튼을 추가하려면 끄기 ...


jQuery 티켓에 따라 수정 사항이 1.10으로 푸시되었습니다. bugs.jqueryui.com/ticket/4731
slolife

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();

});   


0

입력에 포커스가있을 때 키보드가 표시되므로 스마트 폰 및 태블릿에 매우 중요합니다. 이것은 내가 한 일입니다 .div의 시작 부분 에이 입력을 추가하십시오.

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

size로 작동하지 않습니다 0px. 나는 그것이 더 나은 진짜 투명 이미지와 같아요, 하나 .png또는 .gif그러나 나는 시도하지 않았습니다.

지금까지 iPad에서 잘 작동합니다.


-1

당신은 이것을 추가 할 수 있습니다 :

...

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

...


3
그는 초점을 추가하지 않고 초점 을 방지 하는 방법을 묻습니다 .
CBarr

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.