jQuery - predefined input (reaction on blut, fous, change)

Question

I have form with few inputs. Once you focus on input prefilled "0" disappear, and you can enter your own value. If you didn’t enter anything and input is empty on focus out input is set back to "0". And this is working well.

Problem start when once I focus again on input with value previously set to different than 0 and not empty. Let say i put in 2, once I focus on it and focus out without editing anything, value is being set to "0".

What I would like to do is that values different than "0" will not disappear, the cursor will be set at the end input allowing standard editing options.

I hope I explain myself clear.

My code:

<input type='text' class='pack' name='pack01' id='pack01' value='0'/><br>
<input type='text' class='pack' name='pack02' id='pack02' value='0'/>

JS:

$("input[name^=pack]").on("blur", function () {
    if (!this.value) {
        this.value = "0";
    }
});

$("input[name^=pack]").on("focus", function () {
    if (this.value = "0") {
        this.value = "";
    }   
});

JSFiddle: https://jsfiddle.net/nitadesign/vop1vt4p/6/

Answer 1

Your problem is here

$("input[name^=pack]").on("focus", function () {
    if (this.value = "0") {
        this.value = "";
    }   
});

In the if statement you are setting this.value = 0 (note the single equals sign) - Instead you should be doing:

if (this.value == "0") {
  this.value ="";
}

Hope that helps!