prevent Save dialog to appear on Ctrl S - javascript

I want to save page changes when Ctrl-S or Ctrl-Enter is pressed
Ctrl-Enter works fine but on Ctrl-S I cannot prevent a Save dialog to appear.
$(document).on('keydown', function(e){
if (e.ctrlKey && (e.keyCode == 13 || e.keyCOde == 83)){
e.preventDefault();
// save data...
}
});
Any help?

Typo in your code
e.keyCOde == 83 ===> e.keyCode == 83 [Character "O" should be small]

This is what I use :
$(document).keydown(function(event) {
if (!((String.fromCharCode(event.which).toLowerCase() == 's' || event.keyCode == 13) && event.ctrlKey) && !(event.which == 19)) return true;
alert("Ctrl-S pressed");
event.preventDefault();
return false;
});
Another choice is that you can use Shortcut library, you can enjoy more shortcut keys than just ctrl+s. Plus, this library has short & handy code as well :
shortcut.add("Ctrl+S",function() {
alert("Hi there!");
});

Related

JavaScript - Prevent "CTRL" and "ALT" being used for special characters

With the code below, is there anyway of preventing the user from entering special characters that are generated by pressing CTRL + ALT + 4 for example?
That produces the euro currency sign. All the below code works perfectly, I just need to prevent any special characters that are generated from CTRL + ALT
Prevent the user from using their mouse to right click and paste the content in
Working with IE8
`
$("#txtboxToFilter").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode == 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode == 88 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});`
If you want to allow only certain keyboard shorcuts, you can disable anything but whatever you let pass. You can also decide to list everything that you want disabled, and allow everything else to execute. A simple way I see this can go is to disable the Ctrl key and the Alt key if they are pressed simultaneously, as such:
$("#txtboxToFilter").keydown(function (e) {
if (e.ctrlKey === true && e.altKey === true) {
return;
}
else {
//Do whatever;
if (e.key === "Tab") {
//Tab was pressed
}
else if (e.key === "H") {
//Shift H was pressed
}
else if (["Home", "End", "PageUp", "PageDown"].includes(e.key) === true) {
//Navigational Keys Were Pressed
}
else if (["ArrowUp", "ArrowDown", "ArrowRight", "ArrowLeft"].includes(e.key) === true) {
//Directional Arrows Were Pressed
}
}
});
And may I recommend that you use e.key instead of e.keyCode, e.which, or code, because it is more supported, and it is way easier to understand. Just take a look at the code snippet above, there are examples of e.key. Besides, there is no confusion with numbers, because the key names are used. If you wanted to use the Windows Key on Windows, the Search key on Chromebooks, e.key === "Meta" is the way to go.
Hope this extra information helps!!!

How to capture ALT+C keypress

I want catch an event for Alt+c or something like that. My code is
html
<input type="text" id="name"/>
JavaScript
$("#name").keydown(function(e) {
if(e.keyCode == 67 && e.keyCode == 18){alert(e.keyCode);}
});
where is the problem? How it works on both Chrome & firefox?
You need to check for e.altKey instead:
if(e.altKey && e.keyCode == 67){alert(e.keyCode);}
Basically, you are checking for two codes as the same time. The event (e) has several values you can work with ... including altKey which is a boolean (true or false) ...
Try ... watching the e.altKey and the e.keyCode values.
$("#name").keydown(function(e) {
if(e.altKey && e.keyCode == 67) {
alert(e.keyCode);
}
});
With the right version of jQuery, there should be no issue between browsers.
$(document).keydown(function(e) {
//console.log(e.keyCode); If you want to check other keys code
if(e.keyCode == 67 || e.keyCode == 18){
console.log("alt or c pressed");
}
});
You can work around this to check if the two keys are pressed at the same time. I sujest you to use an aux var set to zero wich increase his value when keydown event triggered and decrease it when keyup.

Numeric input validation

I am doing validation on an input type='text' element. I have wired up the 'paste' and the 'keydown' events to trap the input and restrict it to just numbers. The keydown seems to work without a hitch, however, I could not seem to get any of the browsers to actually NOT PASTE the text into the field (I see that there is a beforepaste event, which may be the ticket -- however it appears to not be supported by firefox. In the end, I resulted to just blanking out the input if the value was not a number. This causes a momentary flicker, but seems to work.
Is there a cleaner way to do this? Am I missing something? Is there anyway to prevent the flicker? I know the HTML5 has a type='number', but I'm not ready to go there yet.
<input type="text" id="number" />
<script type="text/javascript">
$(document).ready(function () {
enableNumericOnlyEntry("#number");
function enableNumericOnlyEntry(object) {
$(object).bind('paste', numericOnlyPaste);
$(object).bind('keydown', null, numericOnlyKeyDown);
function numericOnlyPaste(event) {
var inputText = "";
var element = event.target;
setTimeout(function () {
var text = $(element).val();
if (isNaN(text)) {
$(element).val("")
return false;
}
}, 0);
}
function numericOnlyKeyDown(event) {
// Allow: backspace, delete, tab, escape, and enter
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A/a
(event.keyCode == 65 || event.keyCode == 97) && (event.ctrlKey === true) ||
// Allow: Ctrl+C/c
(event.keyCode == 67 || event.keyCode == 99) && (event.ctrlKey === true) ||
// Allow: Ctrl+V/v
(event.keyCode == 86 || event.keyCode == 118) && (event.ctrlKey === true) ||
// Allow: Ctrl+X/x
(event.keyCode == 88 || event.keyCode == 120) && (event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return true;
}
else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
return false;
}
}
}
}
});
I've used this project to create a field that is a masked edit box, you could remove the underscore to it also so it doesn't look like a masked edit. Really easy to use: http://digitalbush.com/projects/masked-input-plugin/
then you'd use something like $("#box").mask("9999999"); and your good to go, works great!
HTML5's <input type="number"> is really where you want to go with this. If you're working with browsers that support it (basically everything except Safari and old versions of IE), it does everything you want.
That said, why not register an onpaste handler so you can reduce pasted content to just numbers after the user pastes?

run functionality of a button

I have a button in HTML and I want to provide a shortcut key to it, which should run the functionality as when button clicks what happens.
Is it possible to do something like this using JavaScript or jQuery.
You can do this using plain HTML: accesskey="x". Then you can use alt+x (depending on the browser though if it's alt or something else)
Untested:
$("body").keypress(function(event) {
if ( event.which == 13 ) { // put your own key code here
event.preventDefault();
$("#yourbutton").click();
}
});
It's pretty easy using jQuery. To trigger a button:
$('#my-button').trigger('click');
To monitor for keypress:
$(window).keypress(function (event) {
if (event.which === 13) { // key codes here: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
event.preventDefault();
$('#my-button').trigger('click');
}
});
Now, if you want to use the Ctrl key or similar you use
if (event.which === 13 && event.ctrlKey)
and similar with event.altKey, event.shiftKey.
$(document).on('keypress', function (e) {
if (e.keyCode === youreKeyCodeHere) {
// if (e.keyCode === youreKeyCodeHere && e.shiftKey === ture) { // shift + keyCode
// if (e.keyCode === youreKeyCodeHere && e.altKey === ture) { // alt + keyCode
// if (e.keyCode === youreKeyCodeHere && e.ctrlKey === ture) { // ctrl + keyCode
$('youreElement').trigger('click');
}
});
Where youreKeyCode can be any of the following javascript char codes , if you're shortcut needs an alt (shift, ctrl ...) use the commented if's . youreElement is the element that holds the click event you whant to fire up.

Simple key combo in jquery

I'm looking to catch simple key combos such as Ctrl + A. Here's my stab at it:
var isCtrl = false;
$(window).keydown(function (e) {
if (e.keyCode == 17) isCtrl = true;
if (isCtrl && e.keyCode == 65) alert('hi');
});
Is this a good and robust approach? If not, how can I improve on it?
Since you're using jQuery, try to utilize what the library provides to normalize the keystrokes .ctrlKey and .which:
if (e.which == 17 && e.ctrlKey) alert('hi');
You can use e.ctrlKey instead of isCtrl.
Your first stab looks good -- just remember to set isCtrl back to false on keyup (if e.keyCode == 17 again).

Categories