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

kgp43Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ludwig DiehlSystems ArchitectCommented:
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
0
kgp43Author Commented:
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

0
Ludwig DiehlSystems ArchitectCommented:
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

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Ludwig DiehlSystems ArchitectCommented:
Oh by the way, here is another approach:

$(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();
		}		
	}).on("keyup", function (e) {
		if (e.which == 27) {
           $(".topsearch").slideUp();
		}
	});
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kgp43Author Commented:
That works great, but it still type "s" in ".topsearch input" (note "focus" on input field) when pressed.
Any way to prevent that?
0
kgp43Author Commented:
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

0
Ludwig DiehlSystems ArchitectCommented:
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?.
0
kgp43Author Commented:
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

0
kgp43Author Commented:
e.preventDefault();

Open in new window


Did the job it seems :)
0
Ludwig DiehlSystems ArchitectCommented:
Prevent default actually stops the event. So be careful when using it because your keypress and keyup events are attached to the whole document.
0
kgp43Author Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.