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.
1
-
If you required that user will not update the value you can use readonly attribute, or you can use blur, change or keyup/keydown event to update the value again to default value.Mohit Raj Purohit– Mohit Raj Purohit2016-05-17 11:15:04 +00:00Commented May 17, 2016 at 11:15
Add a comment
|
6 Answers
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" />4 Comments
Reinstate Monica Cellio
Sorry but this is terrible and I don't understand it getting any upvotes. As soon as you delete the value it puts it back. Most common users wouldn't understand how to enter a different value.
Ankit
But now I can't change 5 to anything else!
Reinstate Monica Cellio
^^ Like that. I'd recommend using a change or blur event handler instead.
Rajshekar Reddy
Downvoters I updated my answer. If this update is fair enough pleasse consider removing the downvotes
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'>Comments
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);
4 Comments
Jai
I guess OP and other are not interested in this answer.
apokryfos
To get this to work on IE 8 (or older) you could use a
trim() polyfilJai
IE8 why event latest windows does not have it. better upgrade or change the browser for better exp...!
David Thomas
@Jai: possibly not, but I still feel it's a slightly better answer than the currently higher-voted answer (if perhaps only because of the explanations). I hadn't until now, however, realised that you and I have effectively posted the same answer (I recognise you were first!); but I'll leave mine as well because of the native JS solution. :(
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
Comments
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.
Comments
<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);
}
})
