在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示例