gpt4 book ai didi

javascript - 在模糊时隐藏框的算法

转载 作者:行者123 更新时间:2023-11-30 13:06:29 26 4
gpt4 key购买 nike

我有代码可以将 float 控件附加到表单中的所有文本框。我写了a fiddle显示它,但代码基本上是这样的:

#box{
position: absolute;
padding: 20px;
}
var $box = $('<div id="box"><input type="button" value="Click Me"></div>').hide().appendTo("#main-form");
$("#main-form").on("focus", ":text, textarea", function(){
$text = $(this);
$box.show().position({
my: "right top",
at: "left top",
of: $text
});
});

当用户输入文本区域(使用鼠标或键盘)时,控制框会在文本区域旁边弹出。到目前为止一切顺利。

我的问题是我想不出一个好的算法来隐藏不再需要的框(即,用户已经离开文本区域)。明显的方法是不够的:

$("#main-form").on("blur", ":text, textarea", function(){
$box.hide();
});

...因为它不允许使用控制框——它会在用户尝试单击按钮时立即隐藏。

我目前正在这条线上尝试一些东西:

$("#main-form").on("blur", ":text, textarea", function(){
if( $box.is(":focus") ){ // :-?
$box.hide();
}
});

...但我无法检测焦点是否已移至控制框。有什么想法吗?

编辑 jQuery API Documentation是这样说的:

If you are looking for the currently focused element, $(
document.activeElement )
will retrieve it without having to search the whole DOM tree.

... 但是 in my tests总是 <body>节点:-?

最佳答案

您可以通过像您正在做的那样听模糊 + 在文档上单击事件来实现此行为:

// Hide the $box if clicked anywhere outside of it
$(document).on('click', function(e) {
if (!$box.data('over')) {
$box.hide();
}
});

// Set a flag if $box is currently hovered
$box.on({
mouseenter: function() {
$(this).data('over', true);
},
mouseleave: function() {
$(this).data('over', false);
}
});

http://jsfiddle.net/g96nr/1/

关于javascript - 在模糊时隐藏框的算法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15522002/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com