单击第二次后onfocus触发

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事件也是如此。 如何加载该领域的首要重点？

谢谢杜珊

Answer 1

用这个...

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

并观看这个演示

Answer 2

您应该使用这样更简单的代码：

jQuery的

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

参见工作小提琴演示 。

编辑仅显示注释一次

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

如果尝试发现事件的类型，则应使用event对象的type属性，而您会滥用typeof运算符，那么简单的事件侦听器就可以解决问题。

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