I'm trying to detect a shift click with javascript but for some reason it only works on IE
.click(function (e) {
if (e.shiftKey) {
Rain();
}
});
this is the code that work for me in IE, how can I detect it on Chrome
I don't think there is a defined combo, but you could make it yourself. A (crude) example:
<div id="someElement">
Click me for an alert!
</div>
<script>
var shiftPressed = false;
$(document).keydown(function(event) {
shiftPressed = event.keyCode==16;
});
$(document).keyup(function(event) {
if( event.keyCode==16 ){ shiftPressed = false; }
});
$('#someElement').on('click', function(e){
if( shiftPressed ){
alert("Shift and click!");
}
else{ alert("Nope"); }
});
</script>
You could improve it by only binding the .keyup() when the keydown is a shift in order to minimize the number of events. You should add as little logic as possible outside the if statements, as this event gets fired a lot
Related
I am using command + h as a shortcut key in my website. It is not doing the function to be done. After I click something on the window only it works flawlessly. Here is my code..
window.onkeydown = function(event) {
if (event.keyCode == 72 && (event.metaKey == true)) {
//some function
}
}
Somebody try to rectify . I have included this code only after the dom gets loaded
window.onkeydown will only work if it is focused. So on body load you should set focus.
<body onload="setFocus()">
function setFocus(){
window.focus();
}
Working DEMO HERE
You could probably make it work with focusing the body on window load with document.body.focus() and attaching an event listener like this:
window.onload = function() {
document.body.focus();
document.addEventListener("keydown", keyDownFunction, false);
};
function keyDownFunction(event) {
if(event.keyCode == 72 && (event.metaKey == true)) {
alert("You hit the right keys.");
}
}
I'm trying to use mouse events in a slideshow in Javascript. How do I use the keyup event to change the image? If I use KeyUp in the text box it's working, but when I use it on the image below it doesn't work.
<script>
var image=document.getElementById("x")
image.addEventListener("keyup",displaykey,false)
image.addEventListener("click",previous,false)
image.addEventListener("contextmenu",next,false)
var step=1;
function previous()
{
step--;
if(step==0)
{
step=3;
}
document.slide.src=eval("show"+step+".src")
}
function next(event)
{
step++;
if(step==4)
{
step=1;
}
document.slide.src=eval("show"+step+".src")
event.preventDefault()
}
function displaykey(event)
{
console.log(e.target)
var unicode=e.keyCode
event.preventDefault();
if((unicode==33)||(unicode==38))
{
previous();
}
else if((unicode==40)||(unicode==34))
{
next();
}
}
</script>
You can try to use JQuery hotkeys plugin that
lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination.
Since you are wanting to change the image on a keyup event and only use javascript the following code will work :
document.onkeyup = function(e) {
var image = document.getElementById('x');
//Left Key
if (event.keyCode == 37) {
previous();
//Right Key
} else if (event.keyCode == 39) {
next();
}
}
This code will execute the onclick event of the image you have whenever the user lifts the left or right directional keys. You can change the keycodes and add more should you wish.
function displaykey(event) {
console.log(e.target)
var unicode=e.keyCode
event.preventDefault();
if((unicode==33)||(unicode==38)) {
previous();
} else if((unicode==40)||(unicode==34)) {
next();
}
}
I think the error occurs here as you passed event in argument and is then using e instead of event.
I want to detect if a user right-clicks a row in a table (datatables powered).
Now, the following code works fine if I use a non-ajax source:
oTable.$('tr').mousedown(function(e) {
if (e.which === 3) { //Right Mousebutton was clicked
window.sData = oTable.fnGetData( this );
jQuery(this).contextMenu({ x: e.pageX + 10, y: e.pageY + 10});
}
});
However, it doesn't work if I use an ajax source, so I looked around and tried:
jQuery('#myTable tbody').on( 'click', 'tr', function (e) {
alert("a click!");
if (e.which === 3) { //Right Mousebutton was clicked
alert("actually it was a right click!");
}
});
This code does detect regular clicks, but if fails to recognize a right click.
What am I doing wrong?
Something like this?
jQuery('#myTable tbody').mousedown(function(e){
if( e.button == 2 ) {
alert('Right mouse button!');
return false;
}
return true;
});
Alexey's code works when you first load the table, but it stops working when you perform some ajax action on it. So the .on(...) method has to be used instead.
The code I'm currently using looks like this:
jQuery('#myTable tbody').on( 'mousedown', 'tr', function (e) {
alert("mouse event detected!");
if( e.button == 2 ) {
alert('Right mouse button!');
return false;
}
return true;
});
I want to do something when a keypress changes the input of a textbox. I figure the keypress event would be best for this, but how do I know if it caused a change? I need to filter out things like pressing the arrow keys, or modifiers... I don't think hardcoding all the values is the best approach.
So how should I do it?
In most browsers, you can use the HTML5 input event for text-type <input> elements:
$("#testbox").on("input", function() {
alert("Value changed!");
});
This doesn't work in IE < 9, but there is a workaround: the propertychange event.
$("#testbox").on("propertychange", function(e) {
if (e.originalEvent.propertyName == "value") {
alert("Value changed!");
}
});
IE 9 supports both, so in that browser it's better to prefer the standards-based input event. This conveniently fires first, so we can remove the handler for propertychange the first time input fires.
Putting it all together (jsFiddle):
var propertyChangeUnbound = false;
$("#testbox").on("propertychange", function(e) {
if (e.originalEvent.propertyName == "value") {
alert("Value changed!");
}
});
$("#testbox").on("input", function() {
if (!propertyChangeUnbound) {
$("#testbox").unbind("propertychange");
propertyChangeUnbound = true;
}
alert("Value changed!");
});
.change() is what you're after
$("#testbox").keyup(function() {
$(this).blur();
$(this).focus();
$(this).val($(this).val()); // fix for IE putting cursor at beginning of input on focus
}).change(function() {
alert("change fired");
});
This is how I would do it: http://jsfiddle.net/JesseAldridge/Pggpt/1/
$('#input1').keyup(function(){
if($('#input1').val() != $('#input1').attr('prev_val'))
$('#input2').val('change')
else
$('#input2').val('no change')
$('#input1').attr('prev_val', $('#input1').val())
})
I came up with this for autosaving a textarea. It uses a combination of the .keyUp() jQuery method to see if the content has changed. And then I update every 5 seconds because I don't want the form getting submitted every time it's changed!!!!
var savePost = false;
jQuery(document).ready(function() {
setInterval('autoSave()', 5000)
$('input, textarea').keyup(function(){
if (!savePost) {
savePost = true;
}
})
})
function autoSave() {
if (savePost) {
savePost = false;
$('#post_submit, #task_submit').click();
}
}
I know it will fire even if the content hasn't changed but it was easier that hardcoding which keys I didn't want it to work for.
I want to let the user select when the shift key is held.
$("#div").selectable({
start: function(st) {
$(window).keydown(function(e){
if(!e.shiftKey){
st.stopPropagation();
}
});
});
no?
You can shorten down your code to be much simpler by using the .shiftKey property on the event directly (it's present in the mousedown event too), like this:
$("#div").mousedown(function(e){
if(e.shiftKey) return;
e.stopImmediatePropagation();
return false;
}).selectable();
You can test it out here.
for those who need it or something similar, this worked well for me:
var shift = false;
$(window).keydown(function(e){
if(e.shiftKey){
shift = true;
}
})
.keyup(function(e){
if(!e.shiftKey){
shift = false;
}
});
$("#div")
.mousedown(function(e){
if(!shift){
e.stopImmediatePropagation();
return false;
}
})
.selectable();
$(window).keydown(function(e){
if(!e.shiftKey){
$("#div").selectable({
start: function(st) {
st.stopPropagation();
//your code here
});
}
});
if that doesn't work try use document instead of window or 'body'