在焦點或模糊（一起）射擊功能

我想要的是當輸入獲得焦點或失去它（兩個事件）時能夠做些什麼。在焦點或模糊（一起）射擊功能

我嘗試了以下方法，但是這是按事件單獨工作（單獨編碼時）：僅在焦點上，或者僅在失去焦點時才起作用。另外，我希望它儘可能跨平臺（包括觸摸設備），這是否足夠（焦點和模糊），還是有一些我需要關心的其他事件？

HTML：

<input type="text" class="inp"> 
<div id="zzz" class=""></div>

CSS：

div { 
    height: 100px; 
    width: 100px; 
    background: #000; 
} 
.one { 
    background: #ff0; 
}

的jQuery（3.2.1）：

$(document).ready(function() { 
    // Also tried using: $(".inp").focus.blur(function() { 
    $(".inp").on("keypress", "focus", "blur", function() { 
     if (!$(this).val()) { 
      $("#zzz").removeClass("one"); 
     } 
     else { 
      $("#zzz").addClass("one"); 
     } 
    }); 
});

來源

2017-04-04 sorvz

閱讀文檔：http://api.jquery.com/on/#example-12 – epascarello

這樣做的另一種方式是 -

你必須改變這一點 -

$(".inp").on("keypress", "focus", "blur", function() {

到

$(".inp").on("keypress focus blur", function() {

$(document).ready(function() { 
 
    // Also tried using: $(".inp").focus.blur(function() { 
 
    $(".inp").on("keypress focus blur", function() { 
 
     if (!$(this).val()) { 
 
      $("#zzz").removeClass("one"); 
 
     } 
 
     else { 
 
      $("#zzz").addClass("one"); 
 
     } 
 
    }); 
 
});

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: #000; 
 
} 
 
.one { 
 
    background: #ff0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="inp"> 
 
<div id="zzz" class=""></div>

來源

2017-04-04 04:08:08 Harsheet

非常感謝！所以我很接近:) – sorvz

是的。別擔心：） – Harsheet

給所有的獨立事件偵聽器和調用函數在他們上面它將工作。

$(document).ready(function() { 
 
    $(".inp").on("keypress",function() { 
 
\t \t \t doSomething(); 
 
    }); 
 
    $(".inp").on("focus",function() { 
 
\t \t \t doSomething(); 
 
    }); 
 
    $(".inp").on("blur",function() { 
 
\t \t \t doSomething(); 
 
    }); 
 
}); 
 

 
function doSomething() 
 
{ 
 
     if (!$(".inp").val()) { 
 
      $("#zzz").removeClass("one"); 
 
     } 
 
     else { 
 
      $("#zzz").addClass("one"); 
 
     } 
 
}

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: #000; 
 
} 
 
.one { 
 
    background: #ff0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="inp"> 
 
<div id="zzz" class=""></div>

OR 如果你真的想所有的事件相結合，然後按照下面的方法：

$('#element').on('keypress blur focus', function(e) { 
    // e.type is the type of event fired 
});

請參見下面的代碼示例：

$(document).ready(function() { 
 
    $('.inp').on('keypress blur focus', doSomething); 
 
}); 
 

 
function doSomething() 
 
{ 
 
     if (!$(".inp").val()) { 
 
      $("#zzz").removeClass("one"); 
 
     } 
 
     else { 
 
      $("#zzz").addClass("one"); 
 
     } 
 
}

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: #000; 
 
} 
 
.one { 
 
    background: #ff0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="inp"> 
 
<div id="zzz" class=""></div>

來源

2017-04-04 04:05:57

它們之間有任何性能差異嗎？謝謝 – sorvz

我會建議'$（'＃element'）。on（'keypress blur focus'，function（e）{etype是被觸發的事件類型 }）;'方法。其實這取決於你想達到什麼。沒有重大差異。 –

好吧，再次感謝:) – sorvz

在焦點或模糊（一起）射擊功能

回答

相關問題