I'm Trying to disable Ctrl++ / Ctrl+- browsers shortcuts via javascript :
$(document).ready(function(){
$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '107' || event.which == '109')) {
alert('disabling zooming ! ');
event.preventDefault();
}
});
});
This code is working great in FF and Chrome , and dosent prevent zooming in IE ! any idea ?
This works for me, though you may want to bind to 'keyup' also.
$(document).ready(function () {
$(document).bind('keydown keypress', function (event) {
event.preventDefault();
});
});
There are more than 2 button numbers you have to preventDefault in order to disable fully the scrolling.
Me personally I disable all ctrl key combinations.
$(document).ready(function () {
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
$(document).bind('keydown keypress', function (event) {
if (event.ctrlKey) {
preventDefault(event);
return false;
}
});
});
Related
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.
When the user press F1 key,I am planning to display our application help and suppress default action.
I tried with different options not to show help popup of IE.
Here is my Code:
document.addEventListener('keydown', function (e) {
if (e.key === 'F1' || e.keyCode == 112) {
e.cancelBubble = true;
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
//my help menu code goes here
}
});
Please let me know how can i achieve in showing the help page of my application instead of IE help.
I am using IE11 version.
You could subscribe to the window.onhelp event:
window.onhelp =function() {
alert();
return false;
}
Try doing this
<script>
$(document).ready(function () {
removedefaulthelp();
function removedefaulthelp()
{
window.onhelp = function () {
return false;
alert();
}
}
document.addEventListener('keydown', function (e) {
if (e.key === 'F1' || e.keyCode == 112) {
removedefaulthelp();
e.cancelBubble = true;
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
//my help menu code goes here
}
});
}
</script>
Refer this for more information.
Here is an example similar to Sukanya's answer, but my solution shows how to extend for the F2-F12 keys, and purposely disregards F-combination keys, such a CTRL + F1.
<html>
<head>
<!-- Note: reference your own JQuery library here -->
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h1>F-key trap example</h1>
<div><h2>Example: Press the 'F1' key to open help</h2></div>
<script type="text/javascript">
//uncomment to prevent on startup
//removeDefaultFunction();
/** Prevents the default function such as the help pop-up **/
function removeDefaultFunction()
{
window.onhelp = function () { return false; }
}
/** use keydown event and trap only the F-key,
but not combinations with SHIFT/CTRL/ALT **/
$(window).bind('keydown', function(e) {
//This is the F1 key code, but NOT with SHIFT/CTRL/ALT
var keyCode = e.keyCode || e.which;
if((keyCode == 112 || e.key == 'F1') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Open help window here instead of alert
alert('F1 Help key opened, ' + keyCode);
}
// Add other F-keys here:
else if((keyCode == 113 || e.key == 'F2') &&
!(event.altKey ||event.ctrlKey || event.shiftKey || event.metaKey))
{
// prevent code starts here:
removeDefaultFunction();
e.cancelable = true;
e.stopPropagation();
e.preventDefault();
e.returnValue = false;
// Do something else for F2
alert('F2 key opened, ' + keyCode);
}
});
</script>
</body>
</html>
I have been using jquery hotkeys plugin from jeresig's hotkey. Shortcuts work fine when the document is in focus, but when the focus is in input fields, the shortcuts are not working. I have used $(document) or $(document).find('input') for binding. But these are not working either.
I have used this following code for making shortcut:
$(document).ready(function(){
shortcutsInit();
});
function shortcutsInit(){
$(document).bind('keydown', "shift+f2", function() {
window.location.replace("/list");
return false;
});
$(document).bind('keydown', "f3", function() {
if($('#searchholder').length){
$('#searchholder').focus();
}
console.log('f3 pressed');
return false;
});
}
try it :
$(document).ready(function(){
$(document).on("keydown", function(e){
if(e.shiftKey && (e.which || e.keyCode || e.charCode) == 113){
window.location.replace("/list");
return false;
}
if((e.which || e.keyCode || e.charCode) == 114){
if($('#searchholder').length)
$('#searchholder').focus();
console.log('f3 pressed');
return false;
}
});
});
Maybe these options are solving the problem:
$.hotkeys.options.filterInputAcceptingElements = false;
$.hotkeys.options.filterTextInputs = false;
Having some problem cross browser. I need to Support IE7-9, my site is set to IE7 standards - cannot be changed. Then i need to support latest chrome, safari and firefox.
I want to hit a keyup event in a textbox on enter. Problem is i have a keypress event added to the form on that page which is submitting the form which i dont want to happen.
Sample application would be like this.
JAVASCRIPT:
$(document).ready(function () {
$("form").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#log1").append("Key press - Form event");
}
});
$("#myInput1").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code != 13) {
return true;
}
$("#log2").append("Enter pressed - input event");
//if (!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
//e.preventDefault();
}
});
$("#myInput1").bind("keyup", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code != 13) {
return true;
}
$("#log1").append("Key up - Enter pressed - input event");
});
});
HTML
<li onkeypress="alert('hi')">
<input id="myInput1" type="text" />
<div id="log1"></div>
<div id="log2"></div>
</li>
If i use e.preventDefault() - keyup event is not hit, if i dont use it, page is posting back.
I want to see "Key up - Enter pressed - input event" to be written to screen on pressing enter, across all browsers.
Any help would be appreciated. Thank you.
Finally was able to do it like this:
$(document).ready(function () {
$("form").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#log1").append("Key press - Form event");
}
});
$("#myInput1").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (e.keyCode != 13) {
return true;
}
$("#log2").append("Enter pressed - input event");
e.stopPropagation();
sampleE = e.keyCode;
$("#myInput1").trigger("keyup");
return false;
});
$("#myInput1").bind("keyup", function (e) {
if (!e.keyCode)
e.keyCode = sampleE;
if (e.keyCode != 13) {
return true;
}
$("#log1").append("Key up - Enter pressed - input event");
});
});
var sampleE = null;
I know this is not the best of the options but this is working. Thanks All.
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..