This question already has answers here:
Close/hide an element when clicking outside of it (but not inside)
(3 answers)
Closed 8 years ago.
I've tried the answers to the similair questions of this without success.
In this jsfiddle: http://jsfiddle.net/h2HzN/6/
I have it set up that when you press escape it goes away using this:
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
}
});
but I also want it go away when you click anywhere but the black box. Thanks in advance.
This should do that DEMO
$(window).click(function() {
if(this.id !== "window") {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
}
});
$("#window").on("click", function(e){
e.stopPropagation();
});
For the latest fiddle you've provided,
MODIFIED FIDDLE
Latest solution for me,
$("#popup").add("#signup_signin a").click(function(e) {
$("#signup").fadeIn(400);
$("#window").slideDown(450);
e.stopPropagation();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
}
});
$(window).click(function() {
if(this.id !== "popup") {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
}
});
$("#window").on("click", function(e){
e.stopPropagation();
});
It only fades out when Esc used or clicked anywhere but the black box and the sign up button.
Try this:
$(document).keyup(function (e) {
if (e.keyCode == 27) {
removeMessage();
}
}).click(function (e) {
if ($(e.target).closest('#window').length == 0 || $(e.target).prop('id') != 'window') {
removeMessage();
}
});
function removeMessage() {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
}
Example fiddle
Note that checking for the closest #window element means that this code will work for any child element within the #window.
Option 1:
$("#window").on("click", function (e) {
//stop propagation so that it's not handled in document root.
e.stopPropagation();
});
//if not stopped by window i.e. not clicked on #window then handle and hide.
$(document).on("click", function (e) {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
});
Option 2:
$(document).on("click", function (e) {
if(e.target.id === 'window') return;
$("#signup").fadeOut(250);
$("#window").slideUp(450);
});
Use stopPropagation():
http://jsfiddle.net/h2HzN/4/
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$("#signup").fadeOut(250);
$("#window").slideUp(450);
}
}).click(function(){
$("#signup").fadeOut(250);
$("#window").slideUp(450);
});
//if you click within #window, the document.click will not trigger.
$("#window").on("click", function(e){
e.stopPropagation();
});
you can do this way:
$("div #window").click(function(e){
return false;
});
$(document.body).click(function(){
$("#signup").fadeOut(250);
$("#window").slideUp(450);
})
Fiddle DEMO
Related
I have founded that if I want to listen on all the document I should do :
$(document).keydown(function(e) {
console.log(e);
console.log(e.keyCode);
if (e.keyCode == 27) {
$('#tftextinput').value="";
$('#tfbutton').click();
}
});
but it doesn't write anything in the console... So I have tried an other version like this:
$(".container.body").keydown(function(e) {
console.log(e);
console.log(e.keyCode);
if (e.keyCode == 27) {
$('#tftextinput').value="";
$('#tfbutton').click();
}
});
this code is in the $(document).ready(function() {});
but nothing happened too...
EDIT:
If I write this code in the web console it works:
So why it doesn't work in my Meteor template code ?
Template.home.onRendered(function() {
$(document).ready(function() {
/*
this method listen if we press "enter" in the research field and click on the button
*/
$('#tftextinput').keypress(function(e) {
if (e.keyCode == 13) {
$('#tfbutton').click();
}
});
$(document).keydown(function(e) {
console.log(e);
console.log(e.keyCode);
if (e.keyCode == 27) {
$('#tftextinput').value="";
$('#tfbutton').click();
}
});
});
});
the first listener works (the one who listens tftextinput)
Try on window
$(window).on("keydown",function(e) {
console.log(e);
console.log(e.keyCode);
if (e.keyCode == 27) {
$('#tftextinput').value="";
$('#tfbutton').click();
}
});
You could use Template events to do the same:
Template.home.events({
'keydown':function(event){
...
},
'keypress #tftextinput': function(event){
...
}
});
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.
How can I bind 2 different events when the document loads?
I have a text field and a button. The function should be executed either when the button is clicked:
$(document).ready(function() {
$("button").click(function() {
myFunction();
});
});
or when Enter is pressed:
$("#id_of_textbox").keyup(function(event){
if(event.keyCode == 13){
myFunction();
}
});
But how to combine both events?
Did you want this:
$(document).ready(function() {
$("button").click(function() {
myFunction();
});
$("#id_of_textbox").keyup(function(event){
if(event.keyCode == 13){
myFunction();
}
});
});
You can bind your function to as many events as needed, here's one way...
$(document).ready(function() {
$("button").click(myFunction);
$("#id_of_textbox").keyup(myFunction);
});
function myFunction(event) {
if ((event.type === 'keyup') && (event.keyCode !== 13)) {
return;
}
// process event here
}
I am using select2, and I need to capture the enter key, but I can't.
I used:
$(document).on('keydown', '.select2-input', function (ev) {
if (ev.which == 13) {
alert('press enter')
}
if (ev.which == 9) {
ev.preventDefault();
ev.stopImmediatePropagation();
alert('press tab')
}
});
I can capture all the keys but for the enter.
Can someone help me?
Try this, it's essentially the same thing:
$(document).on('keyup keypress keydown', ".select2-input", function (e) {
if (e.which == 13) {
console.log("Pressed enter!");
}
});
#Anon's code works!
I'm using Select2 4.0.3 and I just remove keypress and keydown events:
$(document).on('keyup', '.select2-search__field', function (e) {
if (e.which === 13) {
alert('Pressed enter!');
}
});
Try this out:
$('select2-search-field > input.select2-input').on('keyup', function(e) {
if(e.keyCode === 13)
alert('enter key event');
});
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..