如何检测文本区域何时失去焦点并在单击特定元素时防止其失去焦点？

发布于 2024-12-11 23:04:46 字数 535 浏览 0 评论 0原文

我有一个文本区域 #ta，下面有一个列表 #ac-list，用于自动完成：

<div id='container'>
    <textarea id="ta" name="god" rows="20"></textarea>
    <ul id='ac-list' style='visibility:hidden'></ul>
</div>

当文本区域失去焦点时，我想隐藏 #ac-list。所以我在文本区域上调用 jquery 的 blur ：

$('#textarea').blur(function () {
    $('#ac-list').css('visibility', 'hidden');
})

这可行，但我想添加一个约束，即当用户单击 #ac-list 时文本区域不应失去焦点。我该怎么办？

原文

I have a text area #ta with a list #ac-list underneath that's used for auto complete:

<div id='container'>
    <textarea id="ta" name="god" rows="20"></textarea>
    <ul id='ac-list' style='visibility:hidden'></ul>
</div>

When the text area loses focus, I'd like to hide #ac-list. So I call jquery's blur on the text area:

$('#textarea').blur(function () {
    $('#ac-list').css('visibility', 'hidden');
})

This works, but I'd like to add the constraint that the text area shouldn't lose focus when the user clicks on #ac-list. How can I go about this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

零崎曲识 2024-12-18 23:04:46

这是你需要的吗？这只是一个解决方法。模糊文本区域和聚焦 li 项目所需的时间因不同的计算机而异。

HTML：

<div id='container'>
    <textarea id="ta" name="god" rows="20"></textarea>
    <ul id='ac-list'>
        <li>dsfd</li>
    </ul>
</div>

JavaScript：

var textAreaBlur = null;

$('textarea').blur(function () {
    textAreaBlur = new Date();
});

var clickTimes = 0;
$("#ac-list > li").click(
    function() {
        if((new Date() - textAreaBlur) < 200) {
            $("#ta").focus();
            $(this).text("dsfd" + ++clickTimes);
        }
    }
);

Is this what you need? This is just a workaround. The time taken for blur on textarea and to focus on the li item varies to different computers.

HTML:

<div id='container'>
    <textarea id="ta" name="god" rows="20"></textarea>
    <ul id='ac-list'>
        <li>dsfd</li>
    </ul>
</div>

JavaScript:

var textAreaBlur = null;

$('textarea').blur(function () {
    textAreaBlur = new Date();
});

var clickTimes = 0;
$("#ac-list > li").click(
    function() {
        if((new Date() - textAreaBlur) < 200) {
            $("#ta").focus();
            $(this).text("dsfd" + ++clickTimes);
        }
    }
);

回复收藏 0 原文

~没有更多了~