在javascript中检查输入是否为空设置为零

Question

当用户使用backspace删除输入中的值时，该功能正常工作，但如果他删除该值并设置一个新的数字，则删除新值并再次设置为零。

<input type="text" id="txtField" value="0" ></input>

$(document).ready(function() {

  $("#txtField").keyup(function() {

    var v = $(this).val();

    console.log(v)
    if (v == "") {
      console.log(v)
      setTimeout(function() {
        $("#txtField").val(0);
      }, 1000);

    }
  });
});

我不知道我的代码中有什么问题请帮忙吗？

jsFiddle： http ： //jsfiddle.net/2shadgtw/2/

Answer 1

不要使用setTimeout 。 而是尝试映射这三个事件：

$(document).ready(function() {
  $("#txtField").on("keyup change blur", function() {
    if ($(this).val().trim() == "")
      $(this).val(0);
  });
});

小提琴： http ： //jsfiddle.net/5hm6e8hL/

Answer 2

我会使用blur事件来做这个而不是keyup ：

$(document).ready(function() {
  $("#txtField").on("blur", function() {
    if (!$(this).val().trim())
      $(this).val(0);
  });
});

如果输入失去焦点时为空 - 则给它一个值0。

否则 - 什么也不做。

小提琴

Answer 3

问题是你有setTimeout 。 如果用户清除input然后在下一秒输入一个值，则setTimeout的函数仍会关闭，将该value设置为0 。

尝试检查setTimeout的input ，如下所示：

JavaScript的

$("#txtField").keyup(function() {
    setTimeout(function() {
        if ($("#txtField").val().trim().length === 0) {
            $("#txtField").val(0);
        }
    }, 1000);
});

的jsfiddle

Answer 4

setTimeout是一个糟糕的解决方案。 但是ypu可以使用if语句：

$(document).ready(function() {



 $("#txtField").keyup(function() {
var v = $(this).val();

console.log(v)
if (v == "") {
  console.log(v)
  setTimeout(function() {
    if(!$("#txtField").val()){
        $("#txtField").val(0);
    }
  }, 1000);

}


});
});

http://jsfiddle.net/guv0c5ox/

Answer 5

执行此操作的最佳方法是使用focusout（）函数。 尝试这个

<input type="text" id="txtField" value="0" />

$("#txtField").focusout(function() {

var v = $(this).val();

console.log(v)
if (v == "") {
    $("#txtField").val(0);
}
});

如果字段为空，它将在焦点输出时将值设置为零。

JSFIDDLE示例