check if input is empty set to zero in javascript

Question

When the user delete the value in input using the backspace the function work correctly but if he delete the value and set a new number like 1 the new value is deleted and set again to zero.

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

    }
  });
});

I don't know what is the problem in my code any help please?

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

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-07 09:43:39Z

3

Don't use setTimeout. Instead try mapping with these three events:

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

Fiddle: http://jsfiddle.net/5hm6e8hL/

edited Dec 7, 2015 at 9:43

answered Dec 7, 2015 at 9:31

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sora Over a year ago

this don't work i can't change the default value it return to zero immediately

Praveen Kumar Purushothaman Over a year ago

@Sora What exactly are you trying to do? What default value?

Sora Over a year ago

i mean the value 0 this is what i did : 1- if i remove the zero using back space the input still empty 2- if i delete the 0 and put 1 the value return to 0

Praveen Kumar Purushothaman Over a year ago

@Sora Did you see the there's no </input> for the <input> tag.

Praveen Kumar Purushothaman Over a year ago

@Sora It was my mistake. Corrected it.

|

Danield · Accepted Answer · 2015-12-07 09:39:45Z

1

I would use a blur event to do this rather than keyup:

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

If the input is empty when it loses focus - then give it a value 0.

else - do nothing.

FIDDLE

answered Dec 7, 2015 at 9:39

Danield

127k37 gold badges235 silver badges267 bronze badges

3 Comments

Sora Over a year ago

yes but if there is a submit button in the page and the user empty the input using backspace and click the button the value will be empty

Danield Over a year ago

@Sora Are you sure? Take a look at this: jsfiddle.net/danield770/73q8p1k9/1 - if you delete the contents of the textfield and then click on the button the blur event still takes place replacing the empty value with 0

Sora Over a year ago

it seem like i was mistaken i post my comment without testing the result .. sorry

Arg0n · Accepted Answer · 2015-12-07 09:38:17Z

0

The problem is that you have setTimeout. If the user clears the input and then enters a value in the next second, the function in setTimeout will still go off, setting the value to 0.

Try checking the input inside the setTimeout instead, like this:

JavaScript

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

JSFiddle

edited Dec 7, 2015 at 9:38

answered Dec 7, 2015 at 9:31

Arg0n

8,4532 gold badges26 silver badges39 bronze badges

Comments

Alexander Abumov · Accepted Answer · 2015-12-07 09:38:29Z

0

setTimeout is a bad solution. But ypu can use if-statement:

$(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/

answered Dec 7, 2015 at 9:38

Alexander Abumov

981 silver badge7 bronze badges

Comments

Shuvro · Accepted Answer · 2015-12-07 09:46:29Z

0

The best way to do this would be using focusout() function. Try this

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

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

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

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

It will set the value to zero on focus out if the field is empty.

JSFIDDLE EXAMPLE

answered Dec 7, 2015 at 9:46

Shuvro

1,4994 gold badges14 silver badges36 bronze badges

Collectives™ on Stack Overflow

check if input is empty set to zero in javascript

5 Answers 5

7 Comments

FIDDLE

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related