Question

我有一个输入字段，在它的焦点上应该看到一个注释。

<input type="text" name="contact_email" id="contact_email" onfocus="craateUserJsObject.showContactEmailNote();"/>
<div id="contact_email_note" class="info_box">Contact email note</div>

jQuery代码是：

showContactEmailNote : function () {
                    var ContactEmail = jQuery('#contact_email');
                    if (typeof ContactEmail.focus(function()
                        {
                           {
                               $("#contact_email_note").show("slow");
                           }
                        }
                    ));
                    if (typeof ContactEmail.focusout(function()
                        {
                           {
                               $("#contact_email_note").hide("slow");
                           }
                        }
                    ));

                 }

问题是onfocus事件仅在第二次单击输入字段后加载注释。 onclick事件也是如此。它如何加载到该领域的第一个焦点？

谢谢，Dusan

Answer 1

使用此...

$('#contact_email').on('focus blur', function(){
    $("#contact_email_note").toggle("slow");
});

并查看此demo

Answer 2

您应该使用更简单的代码，如下所示：

<强>的jQuery

$('#contact_email').focusin(function() {
    $("#contact_email_note").show("slow");
}).focusout( function() {
    $("#contact_email_note").hide("slow");
});

见工作fiddle demo。

编辑以仅显示一次注释

var noteHasBeenShown = false;
$('#contact_email').focusin(function() {
    if(!noteHasBeenShown) {
        $("#contact_email_note").show("slow");
        noteHasBeenShown = true;
    }
}).focusout( function() {
    $("#contact_email_note").hide("slow");
});

编辑以显示注释但不隐藏

$('#contact_email').focusin(function() {
    $("#contact_email_note").show("slow");
});

Answer 3

如果您尝试发现事件的类型，您应该使用type对象的event属性，您滥用typeof运算符，一个简单的事件监听器就可以了

$('#contact_email').on('focus blur', function(event){
    $("#contact_email_note").toggle(event.type === 'focus');
})

onfocus在第二次单击时间后触发

3 个答案: