嘗試單擊時輸入切換焦點隱藏提交按鈕

Question

我有一個表單，如果您單擊輸入字段以使其聚焦，則會顯示提交按鈕。

但是我遇到的問題是，當您嘗試單擊“提交”按鈕時，由於焦點已從輸入中移出，它消失了。

這是我的代碼：

<form  method="post" id="subForm" class="clearfix">
    <input id="fieldEmail" placeholder="email address" type="email"/>
    <button type="submit"><i class="arrow"></i></button>
</form>


$('#fieldEmail').focus(function () {
    $(this).next().addClass('visible');
}).blur(function () {
    $(this).next().removeClass('visible');
});

這是一個JSFiddle

保持班級“可見”但允許我單擊“提交”按鈕的最佳方法是什么？

Answer 1

它與事件的順序有關。

你可以使用mousedown檢測，其中焦點移到因為它的前觸發blur ：

(function () {
    var submit_focus = false;
    $('#fieldEmail').focus(function () {
        $(this).next().addClass('visible');
    }).blur(function () {
        if (submit_focus) {
            submit_focus = true;
        } else {
            $(this).next().removeClass('visible');
        }
    });

    $('#submit').mousedown(function () {
        submit_focus = true;
    });
}());

http://jsfiddle.net/cnLon9k3/4/

Answer 2

我建議對隱藏按鈕的函數進行檢查，以查看輸入字段是否具有某些值（如果是，則您不想隱藏按鈕，或者？）

例如：

$('#fieldEmail').focus(function () {
    $(this).next().addClass('visible');
}).blur(function () {
    if($(this).val() === ""){
        $(this).next().removeClass('visible');
    }
});

Answer 3

我們可以檢查文本框是否模糊 ， 新的焦點元素是否為button 。

 $('#fieldEmail').focus(function () { $(this).next().addClass('visible'); }).blur(function () { if(!event.relatedTarget||event.relatedTarget.type!='submit') $(this).next().removeClass('visible'); }); 

 form { color:#333; position: relative; } input { padding:0 5px 5px; text-align: center; border:none; text-transform: uppercase; font-size:12px; width:170px; margin-left:15px; float:left; letter-spacing: 2px; } button { display: none; background: #ff0000; border:none; } .arrow { background:#ff0000; width:15px; height:15px; display: block; } .visible { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form method="post" id="subForm" class="clearfix"> <input id="fieldEmail" placeholder="email address" type="email"/> <button type="submit"><i class="arrow"></i></button> </form> 

Answer 4

我建議捕獲document上的每個click事件，如果該event的target不是“ 提交”按鈕或電子郵件輸入 ， submit button如下所示隱藏“ submit button ，並從input刪除模糊事件

$(document).on('click',function(e){
    if(e.target.type!="submit" && e.target.type !="email")
    {
        $('#fieldEmail').next().removeClass('visible')
    }
});

此處演示