Question

Example, i have input where default value is 5. But user remove it using backspace, so after that i want to set default value again.

Answer 1

Lets say your input is having a id test you can do like below

$('#test').on('change blur',function(){
      if($(this).val().trim().length === 0){
        $(this).val(5);
      }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test" type="text" value = "5" />

Answer 2

Use defaultValue to get the default value if set originally:

$(':text').on('blur', function(e){
   this.value = this.value.trim() || this.defaultValue;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' value='5'>

Answer 3

I'd suggest not using keyup, as that would prevent the user from deleting the default value and then updating with a new value (since after keyup is triggered by the backspace key there will be no value).

Instead I'd suggest using change and blur, to give (assuming that the relevant element is held in the selector variable):

$(selector).on('change blur', function() {
    // sets the value of the element based on the current-value;
    // if the value is equal to an empty string ('') once the
    // leading and trailing white-space is removed (using 
    // String.prototype.trim()) then we set the value to the
    // defaultValue (the value held by the <input> on page-load)
    // otherwise we set it to the current-value:
    this.value = this.value.trim() === '' ? this.defaultValue : this.value;
});

If you wanted to implement the same functionality in plain JavaScript – again assuming the relevant element is held in the selector variable – you could use the following:

function defaultIfEmpty(){
    let el = this;
    el.value = el.value.trim() === '' ? el.defaultValue : el.value;
}
selector.addEventListener('change', defaultIfEmpty);

Answer 4

It would be better to use blur instead of keyup, and here's why.

What happens if the user wants to enter in a number (only one digit), but it's not 5, let's say it's (3). If the user backspaces the default number, which is (5) in this case, and wants to enter a single digit, the user will never be able to.

$('#test').on('blur',function(){
  if($(this).val().trim().length == 0){
    $(this).val(5);
  }
})

Note: You should also use a keyup function to check if the value is an integer, !isNaN

Answer 5

A more generic solution:

HTML

<input type='text/numeric/etc' data-default='defaultValue' value='defaultValue' />

JavaScript

$('input[data-default], textarea[data-default]').on('change blur',function(){
   if($(this).val().length == 0) {
       $(this).val($(this).attr("data-default"));
   }
}

Any input or textarea with the data-default attribute set will fallback to the default once it's emptied.

Answer 6

<input class="test" type="text" value = "5" />

JS

//get default value
val = $('.test').val();

$('.test').on('change blur', function() {
  //check if change
  if ($(this).val().trim().length === 0) {
    $(this).val(val);
  }
})

How to set default value of input if value is empty? jQuery

6 个答案: