1

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 you for your help

UPDATE I had a small problem with the fiddle, I updated it

Gaourokelos
  • 11
  • 3
  • 1
    Not sure what you're trying to accomplish, really. I tried entering numbers and it won't work. I tried using arrow keys that should be allowed and it won't work. – Guttsy Aug 19 '11 at 20:15
  • Try use other input methods: a select box or a slider http://jqueryui.com/demos/slider/ – Pindatjuh Aug 19 '11 at 20:17

5 Answers5

1

It's been awhile, but try this:

$('#message').delay(2000).hide();
MRR0GERS
  • 652
  • 5
  • 18
1

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/

Community
  • 1
  • 1
PeeHaa
  • 71,436
  • 58
  • 190
  • 262
1

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

Russ Cam
  • 124,184
  • 33
  • 204
  • 266
  • I just checked it, thank you for this. But what really matters to it is to have always the number 1 inside the textbox. This goes for the beginning (that I tried through the value="1") and didn't work, but also when a user types e.g. 8 hits backstage and the textbox is blank. – Gaourokelos Aug 19 '11 at 20:24
  • Thank you very much and I bet you are bored of me. I understand. However it would be great if, on the page load where the textbox has 1 the amount is not shown. Additionally when I write 7 and hit the backstage (meaning the textbox is blank) there must be number 1 shown on the textbox and the amount below. Summarizing, there must be 1 on textbox on page load with the amount and 1 on textbox and the amount when he hits backspace. Thanks again – Gaourokelos Aug 19 '11 at 20:44
  • I'll let you work that out :) A note: if hitting backspace to clear the textbox shows a number 1 in the textbox, how would a user type any other number below 10 (as there would always be a 1 in the textbox)? – Russ Cam Aug 19 '11 at 20:48
  • In the other hand it is ok if we only show the amount for 1 item ( meaning 10) on page load. – Gaourokelos Aug 19 '11 at 20:50
  • You are correct. Let me work with it and I will come back to you! – Gaourokelos Aug 19 '11 at 20:50
0

This would work:

$('#purchases').val(1).keyup()

after you add your handlers: http://jsfiddle.net/pBeM8/16/

Joe
  • 80,724
  • 18
  • 127
  • 145
0

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.

Kelly Sutton
  • 591
  • 5
  • 12