[英]focus() doesn't work inside colorbox pop-up
I tried to use focus
for first input field on the form. 我尝试将
focus
用于表单上的第一个输入字段。 but it doesn't work. 但这不起作用。 When I call
attr("id")
for that input it worked. 当我为该输入调用
attr("id")
时,它起作用了。 When I call focus for the same input, I didn't see any result. 当我将焦点放在相同的输入上时,没有看到任何结果。 I also tried to use native Javascript.
我也尝试使用本机Javascript。 Does anyone know how to fix that?
有谁知道该如何解决?
You are all misunderstanding the question. 你们都误解了这个问题。 When Colorbox opens you can't focus an input field?
当Colorbox打开时,您无法聚焦输入字段?
...unless you add your focus to the Colobox onComplete key eg ...除非您将焦点添加到Colobox onComplete键上,例如
$('#mydiv a').colorbox({ onComplete:function(){ $('form input:first').focus(); }});
You could also bind the focus to an event hook: 您还可以将焦点绑定到事件挂钩:
$('#mydiv a').bind('cbox_complete', function(){
$('form input:first').focus();
});
That should be enough to get started. 这应该足以开始。
It may be happening that when your colorbox is opened its focus goes onto the highest element ie body of page. 可能发生的情况是,当您打开颜色框时,其焦点将移至最高元素,即页面主体。 use document.activeElement to find that focus went to which element.
使用document.activeElement来查找焦点转到哪个元素。 Then find iframe or id of your colorbox and then set focus on it
然后找到您的色框的iframe或id,然后将焦点放在它上面
use 使用
$(document).ready(function() {
// focus on the first text input field in the first field on the page
$("input[type='text']:first", document.forms[0]).focus();
});
I've just stumbled on this problem. 我偶然发现了这个问题。
I think it's best to have a single $.colorbox opener like this: 我认为最好有一个这样的$ .colorbox 开瓶器 :
function showActionForColorBox(
_url,
_forFocus
) {
$.colorbox(
{
scrolling: false,
href: _url,
onComplete: function () {
idColorboxAjaxIndect1.appendTo($('#cboxOverlay'));
idColorboxAjaxIndect2.appendTo($('#cboxOverlay'));
idColorboxAjaxIndect3.appendTo($('#cboxOverlay'));
idColorboxAjaxIndect4.appendTo($('#cboxOverlay'));
// --> Possible element's ID for focus
if (_forFocus) {
$('#' + _forFocus).focus();
}
return;
},
onCleanup: function () {
// TODO: ?
return;
},
onClosed: function () {
if (shouldReloadPageAfterColorBoxAction) {
// --> Should we reload whole page?
shouldReloadPageAfterColorBoxAction = false; // NOTE: To be sure: Reset.
window.location.reload(false);
}
else if (cbEBillsActionReloadPopup) {
// --> Should we reload colorbox
cbEBillsActionReloadPopup = false;
showActionForColorBox(_url);
}
else if (cbShouldLoadAnotherContentAfterClosed) {
// --> Should we reload colorbox with custom content?
cbShouldLoadAnotherContentAfterClosed = false;
$.colorbox({ html: setupContentForcbShouldLoadAnotherContentAfterClosed });
setupContentForcbShouldLoadAnotherContentAfterClosed = '';
}
return;
}
}
);
return;
}
You can also use 您也可以使用
$.colorbox({
...,
trapFocus: false
});
to disable focus inside colorbox 禁用颜色盒内的焦点
Try the first selector, 尝试第一个选择器,
$("form input:first").focus();
http://jsfiddle.net/erick/mMuFc/ http://jsfiddle.net/erick/mMuFc/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.