Easy question on a jQuery script
I have the following think.
When a user types a number bigger than 10 then there is a message appeared. How to remove this message let's say after 2 seconds ?
Also if you type a number let's say 8 and hit the backspace, there is a 0 appeared. How to have number 1 appeared in the textbox from the beginning but also any time that the user hits backstage to delete his choice like my example above? I tried to add value="1"
into the textbox but it does not show the result in the div from the beginning.
Thank 开发者_StackOverflow社区you for your help
UPDATE I had a small problem with the fiddle, I updated it
It's been awhile, but try this:
$('#message').delay(2000).hide();
Something like
$('#purchases').keydown(function(e){
if(!(e.which >= 48 && e.which <=58) && e.which !== 8 && e.which !== 46 && e.which !== 37 && e.which !== 39){
e.preventDefault();
}
})
.keyup(function(){
val = parseInt($(this).val() || 0, 10);
if(val > 10){
val = 10;
$(this).val(10);
$('#message').text("no more than 10");
setTimeout(function() { $('#message').text(""); }, 2000);
}
$('#amount').text(val * 10);
});
See a Demo
EDIT:
In line with youer comment, here's a revised version
var purchases = $('#purchases'),
amount = $('#amount'),
message = $('#message');
purchases.keydown(function(e) {
if (!(e.which >= 48 && e.which <= 58) && e.which !== 8 && e.which !== 46 && e.which !== 37 && e.which !== 39) {
e.preventDefault();
}
}).keyup(function() {
var val = purchases.val();
if (!val) {
amount.text(1);
return;
}
val = parseInt(val, 10);
if (val > 10) {
val = 10;
$(this).val(10);
message.text("no more than 10");
setTimeout(function() {
message.text("");
}, 2000);
}
amount.text(val * 10);
}).val(1);
New Demo
You should use:
You can use settimeout for this:
setTimeout(function(){
// remove the message
}, 2000); // time in miliseconds
Also your code does not work and display's NaN when I try to enter something.
Also use:
var code = (e.keyCode ? e.keyCode : e.which);
to find out which key was pressed:
jQuery Event Keypress: Which key was pressed?
EDIT
If you want the value to be displayed at page load add the stuff to an function and call it on document ready:
http://jsfiddle.net/pBeM8/20/
EDIT2
Updated fiddle to also display 1 after using backspace
http://jsfiddle.net/pBeM8/22/
This would work:
$('#purchases').val(1).keyup()
after you add your handlers: http://jsfiddle.net/pBeM8/16/
It looks like you could benefit from running parseInt()
on the input that you read in.
Alternatively, you can go for the cool HTML5 solution by adding a pattern
attribute to your input
element, assuming your input is wrapped in a form and submitted:
<form>
<input type="text" pattern="^\d$" />
</form>
Should allow only one numeric character as input.
精彩评论