如何關注對話框中的第一個輸入框
[英]How to focus on first input box in dialog box
問題描述
我有以下測試html文件，我從中刪除了不必要的標簽
dialogTest.htm
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../theme/blitzer.css" />
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#dlg").dialog({
autoOpen: false,
resizable: false,
modal: true
});
$('#button1').click(function () {
ChangePassword();
});
});
var loadedByFunction = false;
function ChangePassword() {
loadedByFunction = true;
$("#dlg").dialog('option', {
width: 380,
height: 300,
title: 'Change Password',
close: function (event, ui) {}
});
$('#dlg').children().attr('src', 'dialogContent.htm')
.load(function () {
if (loadedByFunction) {
loadedByFunction = false;
$("#dlg").dialog('open');
}
});
return false;
}
</script>
</head>
<body>
<div style="display: none">
<div id="dlg">
<iframe src="" ></iframe>
</div>
</div>
<button type="button" name="button1" id="button1" >Change Password</button>
</body>
</html>
和dialogContent.htm
<!DOCTYPE>
<html>
<head>
<script type="text/javascript">
$(function () {
$("input[name='password']").focus();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellpadding="1" cellspacing="0" border="0">
<tr>
<td>Password</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>New Password</td>
<td><input type="password" name="password1" /></td>
</tr>
<tr>
<td> </td>
<td><input type="password" name="password2" /></td>
</tr>
</table>
</div>
<br />
<div align="right">
<input type="submit" name="btnOK" value="Ok" />
<input type="reset" name="btnCancel" value="Cancel" onclick="Close()" />
</div>
</form>
</body>
</html>
我正在嘗試關注對話框中的第一個輸入，這是沒有發生的。 實際的焦點元素是關閉按鈕（您可以通過按Enter來驗證這一點，這會關閉對話框）
請注意，對話框的內容是內部和iframe 。 我不能通過直接將html插入div標簽來組合對話框的內容。 這兩個頁面都是活動的aspx頁面，無法簡單組合。 實際的對話框內容比幾個輸入框更復雜，可以是datebox ， dropdown ， textarea ， multiselect ，...的組合。
請注意， setTimeout也不起作用，因為對話框在打開之前等待頁面將控制權返回給父級
問題如何將焦點移動到對話框中的第一個組件（在這種情況下為密碼輸入）
4 個解決方案
解決方案1
2 已采納 2013-10-24 02:49:56
我過去也有同樣的問題，jQuery將焦點移動到對話框中的第一個控件，在你的情況下，它會成為對話框頂部的關閉按鈕。 由於jQueryUI無法訪問IFRAME內容，因此無法自動找到您的密碼控件。 另一方面，我猜你也無法訪問來自父母的對話內容（跨域可能是？）。
我認為你的問題應該是，如何不關注對話框的第一個元素
我發現了這個問題的臨時修復，但它並不完美。
你可以在大約4年前提交給jQueryUI bug 4731的一張票中讀到這個。
注釋建議在主文件中使用以下代碼（ dialogTest.htm ）
<script type="text/javascript">
$(function(){
$.ui.dialog.prototype._focusTabbable = function(){};
}
</script>
此代碼將解除jQueryUI對話框的焦點移動，您可以像以前一樣使用焦點腳本，但您也需要延遲。
<script type="text/javascript">
$(function () {
setTimeout(moveFocus, 500);
});
function moveFocus(){
$("input[name='password']").focus();
}
</script>
但是正如我之前提到的，這段代碼並不完美。 應該為每個頁面調整延遲，並且再次，它將不會一直工作。
解決方案2
1 2013-10-23 10:02:53
html5有一個解決方案：在你想要集中注意力的文本框中使用autofocus標簽。 http://diveintohtml5.info/forms.html有關於此的更多信息。 如果您不確定目標瀏覽器是否支持自動對焦，則可以在同一頁面上使用回退。
解決方案3
0 2013-10-23 10:03:38
您需要將autofocus屬性添加到文本框中。
<input type="password" name="password" autofocus="autofocus"/>
解決方案4
-1 2013-10-23 10:02:56
使用jQuery，你可以這樣做：
<script type="text/javascript">
window.onload = function() {
$("input[name='password']").focus();
};
</script>
要么
<script type="text/javascript">
$(document).ready(function() {
$("input[name='password']").focus();
});
</script>
WebBrowser注入Javascript將焦點設置到第一個輸入框
[英]WebBrowser Inject Javascript To Set the Focus to the First Input Box
如何在單擊輸入框而不是圖標或箭頭時打開日期選擇器對話框
[英]How to open Datepicker dialog box on click of input box not icon or arrow
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.