asked on

jQuery, prevent keypress if user type in input or textarea

I have a small problem.
Hope one of you can help me :)

The following code show a top search bar when the user press "s" key on his keyboard.
It will hide when he press the Escape key.

Here is the problem:
User start to type in an input or textarea and the top search bar show when he press the "s" key... this is not good. How can I prevent that?

Also, when the user press the "s" key, then "s" is added to the top search bar input field.
How do I prevent that?

Any ideas how to get around that?

$(document).ready(function() {

	$(document).on("keypress", function (e) {
		if (event.which == 83 || event.which == 115) {
		   $(".topsearch").slideDown();
		   $(".topsearch input" ).focus();
		}		
	});
	$(document).on("keyup", function (e) {
		if (e.keyCode == 27) {
		   $(".topsearch").slideUp();
		}			
	});
});

Open in new window

Ludwig Diehl

I think this is what you want:

$(document).ready(function() {

	$(document).on("keypress", function (e) {
		if (e.which == 83 || e.which == 115) {
		       $(".topsearch").slideDown();
		}		
	}).on("keyup", function (e) {
		if (e.which== 27) {
                     $(".topsearch").slideUp();
		}			
	});    
    $('input,textarea').on('keypress keyup',function(e){    
        e.stopPropagation();
    })
    
});

Open in new window

By the way you had an error on your keypress event. You are comparing "event" when the actual event is "e".
So with my solution you stop the event from bubbling up from inputs and textarea.
Oh I recommend you rely on "which" and not "keyCode". Take a look at this event.which

kgp43

ASKER

I updated my question a bit, you probably didn't see it before you started on your answer - sorry about that.

I updated my coding, but now the escape key does not work anymore.

The "s" is still added to the top search bar input field.
How can I remove/clear it? so the input (in the top search bar) is empty when it appear?

$(document).ready(function() {

	$(document)
	.on("keypress", function (e) {
		if (e.which == 83 || e.which == 115) {
			$(".topsearch").slideDown();
			$(".topsearch input").focus();
		}		
	}).on("keyup", function (e) {
		if (e.keyCode == 27) {
			$(".topsearch").slideUp();
		}			
	});    
    $('input,textarea').on('keypress keyup',function(e){    
		e.stopPropagation();
    })
	
});

Open in new window

Ludwig Diehl

I think it is because we are telling it not to propagate keyup events from inputs and textareas. You should then put this instead:

   $('input,textarea').on('keypress',function(e){    
		e.stopPropagation();
    })

Open in new window

ASKER CERTIFIED SOLUTION

Ludwig Diehl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kgp43

ASKER

That works great, but it still type "s" in ".topsearch input" (note "focus" on input field) when pressed.
Any way to prevent that?

kgp43

ASKER

I tried this and it works to some extend.
It clear the field when escape is pressed, but not when "s" is pressed.

$(document).ready(function() {

    function check(o)
    {
        return (o.tagName=='INPUT'||o.tagName=='TEXTAREA')?false:true;
    }
	$(document).on("keypress", function (e) {
	   if ((e.which == 83 || e.which == 115)&&check(e.target)) {
         $(".topsearch").slideDown();
			$(".topsearch input").focus();
			$(".topsearch input").val("");
		}		
	}).on("keyup", function (e) {
		if (e.which == 27) {
           $(".topsearch").slideUp();
		   $(".topsearch input").val("");
		}
	});
});

Open in new window

Ludwig Diehl

I don't understand what you want. As far as I can see you want that "bar" to appear when "s" key is pressed on your document, not in your inputs/textareas. After that, when you press "ESC" it should dissapear right?.

kgp43

ASKER

That is correct, and it works perfectly now :)

But there was a "second" question to the first one.
When "s" is pressed, then the text "s" is added to the input field, is the previously hidden top search bar.

Also, when the user press the "s" key, then "s" is added to the top search bar input field.
How do I prevent that?

I have tried to add this, but that does not work:

$(".topsearch input").focus().val("");

Open in new window

kgp43

ASKER

e.preventDefault();

Open in new window

Did the job it seems :)

Ludwig Diehl

Prevent default actually stops the event. So be careful when using it because your keypress and keyup events are attached to the whole document.

kgp43

ASKER

Hmmm.... that might be annoying to fix down the road, do you have an alternative suggestion/solution?
This is how it works now:

http://configurator.hydra-comp.dk/login.php?lang=en

You can press "s" to see the search bar.