当模式jQuery UI对话框打开时，文本区域没有得到关注

Textarea is not getting focus when modal jQuery UI dialog has opened

本文关键字：区域 文本 UI jQuery 模式 对话框      更新时间：2023-09-26

当我尝试单击id为"customNotepad"的文本区域时，当UI对话框打开时，它没有得到焦点。但是，我可以调整文本区域的大小。当我点击ID为"Header"的div时，它也会发出警报。

#customNotepad{      
    z-index:1002 !important;
	position:absolute !important;      
}
#noteText{      
    z-index:1000;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog({   modal: true});
    
  });
  </script>
</head>
<body>
  
  <div id=customNotepad><div id="Header"><span id="Btn" onclick={alert()}>ClrButton</span><span id="">Title</span></div>
    <div id="notepadContent">
      <textarea maxlength="150" id="noteText"  style="width:100%;height:100%;"></textarea></div>
  </div> 
       
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
</body>
</html>

这根本不可能。根据定义，模式对话框不允许与页面上的其他元素进行交互。

如果你想使用文本区域，就不要让它成为模态。

我真的看不出在这里进行模态对话有任何好处，也有一些害处。

参考：http://api.jqueryui.com/dialog/#option-模式

相关文章：