当模态 jQuery UI 对话框打开时，Textarea 没有获得焦点答案

【问题标题】：Textarea is not getting focus when modal jQuery UI dialog has opened当模态 jQuery UI 对话框打开时，Textarea 没有获得焦点
【发布时间】：2014-10-28 13:35:55
【问题描述】：

当我尝试单击 ID 为“customNotepad”的 textarea 时，当 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>

【问题讨论】：

您在代码中将模型声明为 true { modal: true }，那么如何将焦点设置在 textarea 您可以使用 { modal: false } 而不是 true。
不，我想要模态对话框，同时我想输入文本区域

标签： javascript jquery jquery-ui jquery-ui-dialog

【解决方案1】：

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

如果您希望能够使用 textarea，请不要将其设为模态。

我真的看不出在这里使用模态对话框有什么好处，也没有什么坏处。

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

【讨论】：

在实际应用程序中，我有一个浮动记事本，所以我想在打开 jquery Ui 对话框模式时与该文本区域进行交互...... Ui 对话框模式在实际应用程序中显示了一些其他内容。
这行不通。如果它不是模态的，对话框会更好地工作。
如果我将浮动记事本也更改为对话框，那么我可以输入 textarea 但该对话框模式会提供样式边框和容器。