Hiding a div on Mouse click out OR escape keyword press - javascript

I have the following code that hides my div (live search results) when mouse is clicked outside the div but I can't incorporate an OR function that does the same thing (hides div) when the escape key is pressed. Any help is much, much appreciated. Also, original code on mouse click out is from a different thread I got here on Stackoverflow. The or function is giving me a hard time.
var mouse_is_inside = false;
$(document).ready(function()
{
$('.form_content').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if $('#display').hide();
});
});

This hides #display on pressing escape:
$(document).keyup(function(event) {
if(event.which === 27) {
$('#display').hide();
}
});
Example: http://jsfiddle.net/nsufH/
You could also try to use window instead of document:
$(window).keyup(function(event) {
if(event.which === 27) {
$('#display').hide();
}
});
Or try to use live:
$(document).live('keyup', function(event){
if(event.which === 27) {
$('#display').hide();
}
});

Basically you need to monitor for the KeyCode and act based off it:
$(document).keyup(function(e) {
if (e.keyCode == 27) { $('#display').hide() } // esc
});

$(document).ready(function() {
$(document).on('mouseup keyup', function(e){
var e = e || event,
code = (e.keyCode ? e.keyCode : e.which),
target = e.srcElement || e.target;
if (target.className != 'form_content' || code==27) {
$('#display').hide();
}
});
});

Here is the jsfiddle hiding a div on mouseout and ESC key press :
http://jsfiddle.net/jrm2k6/q2kNX/
Of course there is probably some stuff to do in the way to adapt it as your own source code..

Related

How to disable Escape Key for Twitter Bootstrap Dropdowns?

I do not want Bootstrap Dropdowns to close when the ESC-Key is being pressed.
I tried the following snippet without any success:
$(document).on('shown.bs.dropdown', function (e) {
$(document).on("keydown", $button, function (e) {
var code = e.keyCode || e.which;
if (code === 27) {
e.preventDefault();
}
});
});
I found a similar Question, which is about disabling the Key for Bootstraps Modals. The solution for that seems to be data-keyboard="false". Is there a similar solution for Dropdowns?
Edit:
See JSFiddle
I use following:
$('#dropdown_id').on('hide.bs.dropdown', function (e) {
if ($(this).hasClass('keepopen')) {
$(this).removeClass('keepopen')
e.preventDefault();
e.stopPropagation();
return false;
}
});
Add class 'keepopen' when you expect dropdown to close and want to prevent it. In my case it is typing in the input element inside the dropdown:
$('#input_id').on('keydown', function(e){
if (e.which == 27) {
$('#dropdown_id').addClass('keepopen');
}
});

Enter keypress is not detected on keypress function

I am trying to detect enter key press inside tinmyce editor and it's working fine for all the keys but its not working for enter key.
setup : function (instance) {
instance.on("keypress", function(e) {
var Keycode = (e.keyCode ? e.keyCode : e.which);
alert(Keycode);
});
}
In above code its alerting all the keys except ENTER. i don't know whats the issue there.
keypress wasn't working for me , but keydown worked for me.
setup : function (instance) {
instance.on("keydown", function(e) {
var Keycode = (e.keyCode ? e.keyCode : e.which);
alert(Keycode);
});
}
I think this will work, i've tested it and it works in this fiddle with jquery 2.24
$(document).keypress(function(e) {
if (e.which == 13) {
console.log('You pressed enter!');
} else {
console.log('You pressed ' + e.which);
}
});
body {
height: 500px;
width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>
EDIT: Sorry i only noticed after that this was also tagged as tinymce
I think you can do this by slightly adjusting your function
//tinyMCE.init({
setup : function(instance) {
instance.onKeyDown.add(function(instance, event) {
if (event.keyCode == 13) { //enter
event.preventDefault();
event.stopPropagation();
//do stuff here
//alert("Enter!");
}
else{ alert (event.keyCode);}
});
}
//});
EDIT 2:
In the current tiny mce docs, there is an example of a function [in setup].
maybe try
tinymce.init({
selector: 'textarea', // change this value according to your HTML
setup: function(instance) {
instance.on('keypress', function(e) {
if (event.keyCode == 13) { //enter
event.preventDefault();
event.stopPropagation();
//do stuff here
//alert("Enter!");
}
else{ alert (event.keyCode);}
});
}
});
note the tinymce is now all lowercase..
Try this :
$(function () {
$("#MYTEXTBOX").keyup(function (e) {
alert(e.keyCode);
});
});
onkeypress does not detect some special keys like ctrl, shift arrow keys etc. Use onkeypress or onekyup instead.

Don't execute a keydown function if some divs are clicked

My script execute some actions (like stop one audio player) in case the user press the space bar:
$('html').keydown(function(e){
if(e.keyCode == 32){
// Stop the audio player
}
}
But the problem comes when a user tries to write a message in the textarea because the previous function executes (and it's very annoying)... How can I do to not execute the function, in case the user is writing a message on a textarea or other elements?
You need to skip when user is focussing some control, this example will prevent the player to stop if user i typing in a text area.
$(function () {
$(document).keypress(function (e, f) {
var tagName = e.target.tagName.toLowerCase();
if (tagName != 'textarea') {
if (e.keyCode == 32) {
console.log('Stop Playing');
}
}
});
});
Hopw this helps.
Try this,
$('#textAreaId').keypress(function(e){
e.preventDefault();
});
Use stopPropagation method on event object when space bar pressed on textarea.
$(document).ready(function(){
$("#testTextArea").keydown(function(e){
if(e.keyCode == 32){
e.stopPropagation();
}
});
$("#container").keydown(function(e){
if(e.keyCode == 32){
alert('Player Stoped/Started')
}
});
})
fiddle : http://jsfiddle.net/b0u3z8pg/16/
Try This :)
$('html').keydown(function(e) {
if(e.keyCode == 32){
// stop the music player
}
});
$('input, textarea').keydown(function(e) {
e.stopPropagation();
});
Something like this:
The code inside the if statement only triggers if you are not focused inside a text area or input.
jsfiddle demo
HTML:
<textarea></textarea>
<input type="text">
jQuery:
var exclude = $("textarea, input");
$('html').on("keydown", function( e ) {
if ( e.keyCode == 32 && !exclude.is(':focus') ) {
console.log( 'Space pressed outside input or text area' );
}
});
You should check the sender of the event, if the sender is other controls then the audio player then ignore the call, otherwise stop the player.
$('html').keydown(function(e){
var senderID = $(event.target).attr('id');
if(senderID == 'myAudioPlayerID' && e.keyCode == 32){
// Stop the audio player
}
}

Keypress to change class in jQuery

I have a problem I can't seem to sort out.
I have a form with a custom styled button (input type=button). When typing in the text field, I want people to be able to press the TAB key and go to the button. However, it won't use a tab-index so my solution was to highlight the label and change the CSS to give the button a new border color. However, the border color will not change on keypress in any browser other than Firefox.
Here is what I have:
$(function() {
$("#email").bind("keypress", function(e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
The first enter keypress is to serialize and email the form and all.
I can't seem to get it to work for the life of me. What am I doing wrong? Is there a better solution to what I'm trying to accomplish?
Thanks for taking the time,
Armik
Use keydown instead, for me that works (see demo: http://jsfiddle.net/npGtX/2/)
$(function () {
$("#email").bind("keydown", function (e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
Also I found this: Suppressing keyPress for non-character keys?
keypress is not necessarily triggered when the keypress is not a
character. So the browser may not trigger an event on backspace, F1,
the down key, etc.
You can use the keyup event and event object's which property, jQuery normalizes the which property and it's cross-browser:
$(function() {
$("#email").bind("keyup", function(e) {
if (e.which == 13) {
send();
return false;
};
if (e.which == 9) {
$("#submit_btn").toggleClass('submit1 submit1after');
};
});
};
$(function() {
$("#email").keypress(function(e) {
if (e.keyCode == 13 || e.which== 13) {
send();
return false;
};
if (e.keyCode == 9 || e.which== 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};

jQuery Crashes on .live("keyup")

I have some code here:
$(document).ready(function() {
$("#querybox").live("keyup", function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#querybox").blur();
}
else {
search(document.getElementById('querybox').value);
}
/*if (document.getElementById('querybox').value == "") {
$("center").removeHighlight();
}*/
});
});
that detects a keyUp and uses it to search something. The problem is: when the #querybox is backspaced to the point where it is empty, the entire page crashes and I get the "Awwww, Snap!" message from Google Chrome.
I am using jQuery v1.7.2
Thx a million!
EDIT
I should also point out that the search() function highlights text in the body (notice the commented section). I am using the highlight plugin...
Search Fn:
function search(query) {
$("center").removeHighlight();
$(".paragraph").highlight(query);
$(".highlight").each(function (index) {
$(this).attr("id", "tmpforgoToByClassScrollhighlight" + index);
});
}
Try using .on(...) instead:
$("#querybox").on("keyup", function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
var queryBox = this;
if (code === 13) { // PRESSED ENTER
queryBox.blur();
}
else {
search(queryBox.val());
}
});
After your update:
You might want to look better into how you do your search functiom.
Cache some of those jQuery elements so you do not keep selecting them over and over on each keyup.
Also, I am not going through all of the .highlight code, but there probably is a bug in there that does not allow for an empty string, and that is why the website is causing the browser to crash.
You should use .delegate() instead
$(document).ready(function() {
//It will be a good advice to replace body with a parent element of #querybox
$("body").delegate("#querybox","keyup", function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#querybox").blur();
}
else {
search(document.getElementById('querybox').value);
}
/*if (document.getElementById('querybox').value == "") {
$("center").removeHighlight();
}*/
});
});

Categories