Question

我想要的是能够在输入获得焦点或失去它（两个事件）时做某事。

我尝试了以下操作，但这可以通过事件单独工作（当单独编码时）：仅在焦点上，或仅在失去焦点时。

另外，我希望它尽可能跨平台（包括触摸设备），这是否足够（焦点和模糊）或者还有其他需要关注的事件？

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");
       }
    });
});

Answer 1

单独给出所有事件监听器，并在它们上调用一个可以工作的函数。

$(document).ready(function() {
    $(".inp").on("keypress",function () {
			doSomething();
    });
    $(".inp").on("focus",function () {
			doSomething();
    });
    $(".inp").on("blur",function () {
			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>

或如果您真的想要结合所有事件，请遵循以下方法：

$('#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>

Answer 2

另一种方法是 -

你必须改变这个 -

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

到

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

＆＃13;

$(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");
       }
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

聚焦或模糊的聚焦功能（一起）

2 个答案: