Event handling issue in JavaScript

Question

There is a textbox which is associated with an onkeyup event listener (a JavaScript function, say that alerts something). For an example-

<input type='text' name='text1' onkeyup='exec(this.value);'/>
<script>
exec = function(textdata) { alert(textdata); }
</script>

In this case the alert message will come each time the user hits something on the keyboard.

Is there any way of even handling, where in the event handler will proceed only after a few seconds of inactivity. that is, in this case the alert message will come only if the user has done typing a long text, and is thinking if he wants to add something more or not. For example, he types in his first name and waits for 2 second and after that the alert message appears, and alert message does not appears while he types in each letter of his first name.

Does this answer your question? keycode shortcut each function — Brian Tompsett - 汤莱恩
– Brian Tompsett - 汤莱恩, Commented Jul 15, 2022 at 7:53

Mark Walters · Accepted Answer · 2012-09-17 09:07:56Z

1

You need to use onkeyup rather than onchange if you wish to run a function every time a key is pressed. Try this for the functionality you want

<input type='text' name='text1' onkeyup='exec(this.value);'/>
<script>

var timer; //This needs to be a global variable

exec = function(textData){

  clearTimeout(timer);

  timer = setTimeout(function(){ alert(textData) }, 2000);  
}
</script>

Every time the user presses a key (enters a character into the textbox) the function is called and the timer is cleared. The timer is then set to alert the textbox's value after 2 seconds, if they again press any keys before the 2 seconds has elapsed the timer is reset. Here is a working jsFiddle.

answered Sep 17, 2012 at 9:07

Mark Walters

12.4k6 gold badges36 silver badges48 bronze badges

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

Comments

rationalboss · Accepted Answer · 2012-09-17 09:04:07Z

0

In your code, the text is only alerted each time you leave the textbox. That is the behavior of onchange. You need to lose focus on the item before it is triggered.

onkeyup will alert() each time a user presses something while in the textbox.

answered Sep 17, 2012 at 9:04

rationalboss

5,3973 gold badges32 silver badges50 bronze badges

Collectives™ on Stack Overflow

Event handling issue in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related