2013-05-17 2 views
3

jQuery UI 대화 상자 위젯을 열고 대화 상자의 내용에 텍스트 상자가 있으면 입력을 누르면 대화 상자가 자동으로 닫힙니다. 이것은 IE9 또는 IE10을 사용할 때만 발생하는 것으로 보입니다. 텍스트 상자에서 엔터를 누르면 대화 상자가 닫히는 것을 원하지 않습니다. 이 HTML 페이지를 열 때 당신은 (단지 IE9 +에서) Enter 키를 누르면jQuery UI 대화 상자가 닫힙니다.

<!DOCTYPE html> 

<html> 

<head> 
<title>Testpage</title> 

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#myDialog').dialog(); 
    }); 
</script> 

</head> 

<body> 

    <div id="myDialog"> 
     Some text   
     <input type="text"></input> 
    </div> 

</body> 
</html> 

대화 상자가 닫힙니다 :

나는 다음과 같은 HTML이있다. 어떤 제안?

+0

[이] (http://jsfiddle.net/SirDerpington/3FVsp/) jsfiddle은 잘 작동하는 것 같다 : 또 다른 해결책은를 keyDown 우선,하지만 여전히 특정 컨트롤은 Enter 키를 얻을 수 있도록주의해야하는 것입니다. .. IE 10 및 9에서도 마찬가지입니다. – SirDerpington

+0

jsFiddle을 사용하면 입력란에 입력 할 때 양식 제출과 같은 다른 페이지가 열립니다. 이 동작은 Chrome 및 Firefox에서 표시되지 않습니다. 텍스트 상자에서 엔터를 누르면 대화 상자를 아무 것도 표시하지 않습니다. – Barbarammie

+0

바이올린은 위에 표시된 것과 동일한 버전의 jQuery UI를 사용하지 않습니다. –

답변

3

jQuery UI 1.10.x에서와 같이 보이며 오른쪽 상단의 닫기 버튼이 <a>에서 <button>으로 변경되었습니다. 이 버튼은 type 속성을 지정하지 않으므로 type="submit"으로 간주됩니다. IE9 +에서 Enter 키를 누르면 브라우저는 제출 버튼을 찾고 닫기 버튼을 찾아서 누릅니다.

var baseInit = $.ui.dialog.prototype._init; 
$.ui.dialog.prototype._init = function() { 
    baseInit.apply(this, arguments); 

    // Make the close button a type "button" rather than "submit". This works 
    // around an issue in IE9+ where pressing enter would trigger a click of 
    // the close button. 
    $('.ui-dialog-titlebar-close', this.uiDialogTitlebar).attr('type', 'button'); 
}; 
+0

초기화 대화 상자에서이 패치를 만들 필요가 없습니다. –

+3

@Leandro 더 자세한 정보를 제공 할 수 있습니까? –

1

:

이 문제를 해결하려면 몇 가지 방법이있다, 나는 가장 좋은 방법은 ui.dialog의 _init 기능을 재정 의하여 닫기 버튼의 종류를 해결하는 것이라고 주장 것 이 오픈되기 전에 대화는 대화 상자가 생성 된 후에, autoopened 될 필요하지 않는 경우 :

 $("button.ui-dialog-titlebar-close").attr("type","button");  

또한, 대화 HTML에서 아무 버튼이나 요소가있는 경우, = 유형을 명시 적으로 포함해야 "button"속성을 입력하거나 in put 컨트롤은 버튼과 관련된 액션을 시작합니다.

0

IE9/IE10과 IE11의 차이점은 ie9와 10이 keydown에서 활성화되는 것 같습니다. 즉 11은 keyup에서 제출 버튼을 활성화합니다.

자신의 행동을 취하기 위해 keyup을 처리하는 경우 9-10을 제외하고 대부분의 브라우저에서 작동합니다.

$(document).on('keydown', '.ui-dialog', function (e) { 
    var tagName = e.target.tagName.toLowerCase(); 
    if (e.which !== $.ui.keyCode.ENTER) return true; 
    if (tagName === 'textarea') return true; 
    if (tagName === 'select') return true; 
    e.preventDefault(); 

    return false; 
}); 
관련 문제