Javascript events

Question

I am completely confused here. So I am looking for a solution for the following problem:

I want to trigger some function(for now an alert box) using jQuery on an input field. Conditions are:

Input field always maintains the focus.
Input is fed from a USB device, which acts just like a keyboard input. So for 10 characters, there will be 10 keydown and keyup events.
Once input is filled with 10 characters, respective alert box should pop out.

Now the problem I am facing, how do I find out that input fed in is not equal to 10 characters, so throw an error alert box.(lets say just 5 chars came in input, how do I figure out the final count is 5, because there will be 5 keyup events)

Please edit this, this is not code so please highlight it and press the code icon again to make it text. Thanks. — EKet
– EKet, Commented Sep 28, 2010 at 17:19
I don't get it.. you want an alert box when there's ten characters, but also when there's not 10 characters? — Alexander Sagen
– Alexander Sagen, Commented Sep 28, 2010 at 17:20
@sagen, well on actual code, I am going to make an ajax call if there are ten chars, if not then throw an error — t0mcat
– t0mcat, Commented Sep 28, 2010 at 17:37

adamJLev · Accepted Answer · 2010-09-28 17:22:19Z

1

You could show a message underneath/beside the input box instead of popping an alert box.
E.g. on every keyup event, check the string length, and if it's not 10, show that message.

If you really, really have to resort to alert box, you could do a timeout check, e.g. only perform the validation after 1000ms of key event inactivity. This could get very annoying on the user though.

answered Sep 28, 2010 at 17:22

adamJLev

14.1k11 gold badges64 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JasCav · Accepted Answer · 2010-09-28 17:47:42Z

0

You really have two problems here. One is just understanding the jQuery syntax (see the second part to my answer), and the other is - what is the best way to understand WHEN to throw up an error box.

To answer the second question first, my recommendation would be to not use an alert box to warn the user as they tend to be modal and really interrupt the flow of input. Secondly, as you said - how do you know when the person has stopped "typing." Unless you use some sort of timing mechanism (which is more trouble than it's worth), you don't. My suggestion would be to utilize a "div" within your HTML that shows there is an error UNTIL you reach 10 characters. Once that happens, you can hide the div. (And, of course, the div can be styled to look pretty in the meantime.)

So...how to do this...

Let's assuming your input field has an id of "myField." If you are using jQuery (which is in your tags), you would do something like this.

$(function() {
  var keypresses = 0;
  $('#myField').keyUp(function () {
    keypresses++;
    if(keypresses == 10) {
      $('#error').hide(); // This is your div error with some error text in it.
      // Do other stuff.
    } else {
      // Display an error.
    }
  });

Alternatively, if you don't want to use the keypresses variable, you can also use..

if($(this).val().length == 10) { }

edited Sep 28, 2010 at 17:47

answered Sep 28, 2010 at 17:26

JasCav

34.6k21 gold badges117 silver badges175 bronze badges

6 Comments

Alpesh Over a year ago

The above method can be risky if the text in input field is copy pasted. Because in that case there will be either 1 or no keyup events and so counter keypresses will not increment and validation can fail.

JasCav Over a year ago

@Alpesh - I agree, but, the original question said the input is coming from a USB device which acts as keyUp/keyDown events. Otherwise, I would use "change."

Alpesh Over a year ago

Ya for above case it is ok but i was just bringing it to notice. :)

t0mcat Over a year ago

Hi JasCav, so inside this keyup event, I can do both the cases. First: when input is 10 chars long, fire ajax call. Second: Input isnt 10 chars long, display error. Correct?

JasCav Over a year ago

@twch - Yes you can. I updated my answer to show you how you can do that. (If you want to put alert boxes in the if/else statement, you can go ahead and do that. Again, I recommend an error div or something like that.)

|

Moses · Accepted Answer · 2010-09-28 17:27:31Z

0

The real issue is the fact that you are measuring in key press events, because not all key presses (even when the field has focus) will insert a character into field (for example returnesc). Therefore, you will need to measure the string length in order to validate the code before you start executing functions.

In actuality you don't even need jQuery to accomplish what you need, just bind the function call to a key press event, and only execute the function call if yourstring.length = 10

yourInput.onKeyPress(yourString.length = 10 && yourFunction());

answered Sep 28, 2010 at 17:27

Moses

9,2316 gold badges49 silver badges67 bronze badges

Comments

Alpesh · Accepted Answer · 2010-09-28 17:37:05Z

0

Try -

$('#idofinputfield').keyUp(function () {
    var length = $('#idofinputfield').val().length;
    if(length <= 10){
       alert("less than 10");
    }else{
       alert("greaterthan 10");
       }
   });

edited Sep 28, 2010 at 17:37

answered Sep 28, 2010 at 17:26

Alpesh

5,4152 gold badges23 silver badges19 bronze badges

Collectives™ on Stack Overflow

Javascript events

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related