jQuery焦点/模糊形式,而不是个人输入

前端之家收集整理的这篇文章主要介绍了jQuery焦点/模糊形式,而不是个人输入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
怎么可以通过jQuery实现?

用户点击表单中的任何输入时,它会被聚焦.当用户从任何输入中单击窗体时,它会变得模糊,但是,在窗体本身的输入之间的选项卡之间不会触发模糊.

对于这样的事情,我们正在研究这个基本结构:

<form>
<input ... />
<input ... />
<input ... />
</form>

再说一次,让我说我点击表单中的任何输入,我们知道表单是重点.接下来,当用户点击任何输入时,只有在我们点击表单外部时才会触发模糊.

我之前已经问过这个问题,并且在表格中的最后一个输入字段模糊但不是来自输入列表中的任何元素时,如何获得有关如何实现模糊效果的输入.

谢谢,
马克安德森

解决方法

当您在输入之间进行选项卡时的事件序列:
Click on input1:  input1 focus

  Clickb on input2: input1 blur
                    input2 focus

  Click outside:    input2 blur

当输入失去焦点时,您需要检查表单中的其他元素是否获得焦点.或者您可以简单地检查活动元素是否仍在表单中:

$('form').on('focusout',function(event) {
    setTimeout(function() {
        if (!event.delegateTarget.contains(document.activeElement)) {
            console.log('Form blur');
        }
    },0);
});

JSFiddle

请注意,表单在提交时不会模糊,因此如果要在模糊和提交时执行相同的操作,则可能需要添加提交处理程序.

还要注意使用setTimeout,这是必需的,因为当元素即将失去焦点时会发出模糊和聚焦事件,但还没有丢失它.

原文链接:https://www.f2er.com/jquery/180841.html

猜你在找的jQuery相关文章