Question

我将dijitDialogUnderlayWrapper设置为none显示，以在屏幕上逐个显示两个对话框（两者都包含文本框）。

问题是当我单击第一个对话框时，在我关闭第二个对话框之前，它上面的所有文本框都无法编辑。但是，只要我点击它，就可以编辑第二个对话框中的所有文本框。

我想要做的是当我激活（聚焦）一个对话框时，也可以编辑该对话框上的所有文本框。我尝试使用＆＃34; focusUtil.focus＆＃34;在第一个对话但失败。有人有想法吗？感谢。

以下是来源：jsfiddle.net/Calgis/aL5auzja /

Answer 1

顶部的Dialog是唯一能够获得focus的人。这是设计的。您可以看到dojo代码以供参考： https://github.com/dojo/dijit/blob/master/Dialog.js#L674-L691

使用Dialog没有好办法避免这种情况。但是，有一点黑客（注意：它可能会导致其他问题）。您必须用空的方式覆盖对话框的focus方法。

在摘录中，关键部分是data-dojo-props="focus:function(){}"

＆＃13;

require(["dojo/parser", "dijit/Dialog", "dijit/form/Button", "dijit/form/TextBox", "dijit/form/DateTextBox", "dijit/form/TimeTextBox"], function(parser) {
  parser.parse()
});

document.body.className = "tundra"; //only usefull in the snippets

＆＃13;

.dijitDialogUnderlayWrapper{
		display:none !important
		}
		.nonModal{
			background-color:rgba(211, 211, 211, 0.9);
        }
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css"> 


<div data-dojo-type="dijit/Dialog" data-dojo-props="focus:function(){}" data-dojo-id="myFormDialog" title="Dialog1">

    <div class="dijitDialogPaneContentArea">
        <table>
            <tr>
                <td><label for="Firstname">First Name: </label></td>
                <td><input data-dojo-type="dijit/form/TextBox" type="text" name="name" id="firstname"></td>
            </tr>
             <tr>
                <td><label for="Lastname">Last Name: </label></td>
                <td><input data-dojo-type="dijit/form/TextBox" type="text" name="name" id="lastname"></td>
            </tr>
            <tr>
                <td><label for="date">Date: </label></td>
                <td><input data-dojo-type="dijit/form/DateTextBox" data-dojo-id="myStartDate" onChange="myEndDate.constraints.min = arguments[0];" type="text" name="sdate" id="sdate"></td>
            </tr>
            
            <tr>
                <td><label for="desc">Description: </label></td>
                <td><input data-dojo-type="dijit/form/TextBox" type="text" name="desc" id="desc"></td>
            </tr>
        </table>
    </div>

    <div class="dijitDialogPaneActionBar">
        <button data-dojo-type="dijit/form/Button" type="submit" onClick="return myFormDialog.isValid();">
            OK
        </button>
        <button data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog.hide()">
            Cancel
        </button>
    </div>
</div>

    <div data-dojo-type="dijit/Dialog" data-dojo-props="focus:function(){}" data-dojo-id="myFormDialog2" title="Dialog2">

    <div class="dijitDialogPaneContentArea">
        <table>
            <tr>
                <td><label for="name">Name: </label></td>
                <td><input data-dojo-type="dijit/form/TextBox" type="text" name="name2" id="name2"></td>
            </tr>
            <tr>
                <td><label for="date">Date: </label></td>
                <td><input data-dojo-type="dijit/form/DateTextBox" data-dojo-id="myStartDate" onChange="myEndDate.constraints.min = arguments[0];" type="text" name="sdate2" id="sdate2"></td>
            </tr>
            
            <tr>
                <td><label for="desc">Description: </label></td>
                <td><input data-dojo-type="dijit/form/TextBox" type="text" name="desc" id="desc2"></td>
            </tr>
        </table>
    </div>

    <div class="dijitDialogPaneActionBar">
        <button data-dojo-type="dijit/form/Button" type="submit" onClick="return myFormDialog2.isValid();">
            OK
        </button>
        <button data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog2.hide()">
            Cancel
        </button>
    </div>
</div>

<p>Click button to show dialogs:</p>
<button id="buttonThree" data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog.show();">
    Show Dialog 1
</button>
<button id="buttonThree2" data-dojo-type="dijit/form/Button" type="button" onClick="myFormDialog2.show();">
    Show Dialog 2
</button>

＆＃13;

Dijit：在显示第二个对话框后，无法编辑第一个对话框中的所有文本框

1 个答案: