我在用着
- jQuery:1.9.1
- jqueryui:1.10.2
- 所有浏览器都显示相同的行为 -
因此,每当有人右键单击 textarea 元素时,我都会启动一个 jquery 对话框。我注意到文本区域在右键单击时会通过活动光标获得焦点,因此我在元素上调用 blur() 以摆脱光标。
工作,没问题。
然后在对话框中,如果用户单击“编辑”,我想将光标重新放在文本区域上。我调用了 show() 和 focus() [参见下面的代码],但它并没有让焦点恢复。没有错误,除了我想要的对话框关闭之外什么也没有发生(对话框关闭,textarea 应该有一个活动光标但没有)。
下面是代码,非常感谢任何帮助,我已经尝试了几个小时。我确定了我希望工作的代码,但没有“这是问题”
HTML
这是一个 jqueryui 对话框的元素。当用户右键单击目标元素时,这将显示为对话框的内容
<div id="popupDialog">
<input type="button" id="editRowButton" class="contextmenuButton"
value="edit">
</div>
在整个页面中,我都有这些文本区域,当右键单击时,将显示 jqueryui 对话框。
<textarea id="targetThatWasRightClicked" >some content in the textarea</textarea>
javascript
<!-- This handler is used to clear the dialog if anyone clicks outside the dialog.-->
<!-- Is working fine. -->
$(document).bind('click',function(){
// if the dialog is open, close it
if( $("#popupDialog").dialog("isOpen" ) ) {
closeDialog();
}
});
function closeDialog() {
mydialog.target = null;
$("#popupDialog").dialog("close" ); <!-- invokes the jquery close method. -->
<!-- This is working fine -->
};
<!-- is used to initialize the jqueryui dialog, also holds a reference to the -->
<!-- object that gets right-clicked as "target". -->
var mydialog = {
target : null,
init : function() {
$('#popupDialog').dialog({
modal: true,
dialogClass: "no-close",
width:'auto',
height:'auto',
resizable: false,
autoOpen: false
});
}
<!-- general setup stuff when the $(document).ready(..) function is called. -->
function initSideMenu() {
$("#editRowButton" ).button();
$('#editRowButton').click( function() {
<!-- THIS IS THE PROBLEM: I expect the textarea (the target) to have -->
<!-- a blinking cursor in it after these next two commands, but it -->
<!-- remains unselected. -->
mydialog.target.show();
mydialog.target.focus();
closeDialog();
});
mydialog.init();
$("#targetThatWasRightClicked").on("contextmenu", function(e){
var target = $(e.target);
<!-- the right-click focussed on the textarea, so un-focus it so the -->
<!-- cursor isn't blinking in the textarea. -->
target.blur();
<!-- set "target" = the right-clicked element and open a dialog box -->
mydialog.target = target;
$('#popupDialog').dialog('open');
e.preventDefault(); <!-- So the browser's contextmenu doesn't appear. -->
e.stopPropagation(); <!-- So the document click handler doesn't get called -->
<!-- and close the dialog. -->
});
}