i'm currently developing a web application and i encounter a problem.
As you might know or not, chrome has a feature that gives <input> (especially text inputs) an "undo" function when you hit CTRL+Z and "redo" with CTRL+Y it may seem like a good feature in normal websites, but currently i'm making an image editor that also uses those keyboard shortcuts (CTRL+Z & CTRL+Y).
in my app i also have a text input, so when i change the text input's content and then hit CTRL+Z to undo the changes in my image editor, it would undo the change in the text editor instead!
here is a Codepen that would demonstrate the effect(instruction is in the Codepen)
So in conclusion i want to remove the undo/redo function in chrome how can i do that?
var ctrlDown = false;
var ctrlKey = 17, vKey = 86, cKey = 67, zKey = 90;
document.body.onkeydown = function(e) {
if (e.keyCode == 17 || e.keyCode == 91) {
ctrlDown = true;
}
if ((ctrlDown && e.keyCode == zKey) || (ctrlDown && e.keyCode == vKey) || (ctrlDown && e.keyCode == cKey)) {
e.preventDefault();
return false;
}
}
document.body.onkeyup = function(e) {
if (e.keyCode == 17 || e.keyCode == 91) {
ctrlDown = false;
};
};
<body>
<input type='text' value='test' />
</body>
Does this work?
Stolen from here, found on here as a comment by #KadeHafen.
You could use onkeydown event, and preventDefault.. eg.
document.onkeydown = function(e) {
if (e.ctrlKey && e.key === 'z') {
e.preventDefault();
alert("CTRL + Z!");
}
}
Related
I mean is there any way to prevent the default accesskey in Chrome.
var text = document.getElementById("text");
text.onkeyup = function(e) {
if(e.ctrlKey && e.keyCode == 72) {
// do something...
alert("You wont see me cause Chrome will open history manager");
}
}
<textarea id="text"></textarea>
This should work. You need Keydown Event.
var text = document.getElementById("text");
text.addEventListener("keydown", function(e) {
console.log(e.keyCode);
if (e.keyCode == 72 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
e.preventDefault();
alert('Stopped');
}
}, false);
<textarea id="text"></textarea>
I've added isCtrlDown variable and keyup with keydown event, to achieve what you're looking for because I didn't see isKeyDown kind of function in Key as discussed here.
var isCtrlDown = false;
var text = document.getElementById("text");
text.onkeydown = function(e){
if(e.keyCode == 17){
isCtrlDown = true;
}
if(isCtrlDown && e.keyCode == 72){
// do something...
console.log("You wont see me cause Chrome will open history manager");
}
e.preventDefault();
}
text.onkeyup = function(e){
if(e.keyCode == 17){
isCtrlDown = false;
}
e.preventDefault();
}
I have the following code to allow only numbers to be entered (other logic is removed for brevity).
$("input").keydown(function (event) {
var key = event.keyCode;
if ((key < 48 || key > 57) && (key < 96 || key > 105) || event.shiftKey) {
event.preventDefault();
}
});
This code works fine in English keyboards but on French keyboards the shift key is used so the logic fails there. If i remove the shift the logic fails in english keyboards.
Is there a way to detect a number is being pressed in the keydown event that will work on any type of keyboard?
Thanks
Use a custom function to check if the value of the keydown is numeric. From this previous answer (Validate decimal numbers in JavaScript - IsNumeric()):
function isNumber(n)
{
return !isNaN(parseFloat(n)) && isFinite(n);
}
And your handler UPDATED:
$("input").keydown(function (event) {
var code = event.keyCode;
//Allows left and right arrows, backspace, and delete
if(code == 37 || code == 39 || code == 8 || code == 46)
return;
var character = String.fromCharCode(code);
if(event.shiftKey || !isNumber(character)){
event.preventDefault();
}
});
I have found that event.key works better than event.keyCode. The event handler needs to be onkeydown for it to work properly. The check for whether it's a number needs to come first. Here's my code. Tested to work on IE11, Edge, Chrome, and Firefox.
$("input").keydown(function (event) {
var code = event.keyCode;
var key = event.key;
if (!isNaN(Number(key)))
return;
// allow backspace, delete, left & right arrows, home, end keys
if (code == 8 || code == 46 || code == 37 || code == 39 || code == 36 || code == 35) {
return;
} else {
evt.preventDefault();
}
});
#HostListener('keydown', ['$event']) onKeyDown(event) {
if ((e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
} else if (!this.isNumber(e.key)) {//For french keyboard
e.preventDefault();
}
}
}
isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
I had a similar problem because of 2 different keyboards. And I solve that by checking if is not a number in the key value instead of the keyCode value.
Would this work?
$("input").bind("propertychange input textInput", function() {
this.value = this.value.replace(/[^\d.]/g, "");
});
Of course, this trims the value after the input event, so I'm not sure if that's what you want
<script type="text/javascript">
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
var isCtrl = false;
document.onkeyup=function(e)
{
if(e.which == 17)
isCtrl=false;
}
document.onkeydown=function(e)
{
if(e.which == 17)
isCtrl=true;
if((e.which == 85) || (e.which == 67) && isCtrl == true)
{
// alert(‘Keyboard shortcuts are cool!’);
return false;
}
}
</script>
Hi all , I using the code to disable the right click and also the ctrl+c and ctrl+u how to disable the ctrl a in the following code. Any help would be great.
Thanks,
vicky
You shouldn't try to do this, let me tell you why. I'm assuming you want to disable ctrl + c because you don't want the user to be able to copy content from your site, well have you thought about the fact that there are a dozen of other ways to copy your content?
Download html file and copy in their favorite text editor
Inspect element and copy content from there
Use mouse to right click -> copy
And for my good friend #glenatron:
Network sniffer like Fiddler between the browser and the network card
Screenshots, Taking a photograph of the monitor
... The list goes on and on.
Also, trying to stop users from normal functionality will only bother and annoy them; most likely causing them to leave your site and never return.
FInd the below code for detect ctrl + a,ctrl + A,ctrl + c,ctrl + C, ctrl + u,ctrl + U with your code editing.
<script type="text/javascript">
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
var isCtrl = false;
document.onkeyup=function(e)
{
if(e.which == 17)
isCtrl=false;
}
document.onkeydown=function(e)
{
if(e.which == 17)
isCtrl=true;
if(((e.which == 85) || (e.which == 117) || (e.which == 65) || (e.which == 97) || (e.which == 67) || (e.which == 99)) && isCtrl == true)
{
// alert(‘Keyboard shortcuts are cool!’);
return false;
}
}
you can get value for key from below link
http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=00000520.html
Enjoy...!! :)
How can i disable the ctrl + a
I had the same question but for a different reason,
I had multiple textPath elements in my DOM and because of some weird bug, whenever I pressed ctrl + a they all change position, to fix that I added:
body{
...
user-select:none
}
I guess this also "technically" disables Ctrl + a
In my chat application there are some text fields which gets the user login details.
when filling the user details,If user suddenly pressed the ESC key,the data will be lost.
I need to disable the function of ESC key ? which event I need to use ? how can I do that.
my Java Script code is ,
function esc(e){
e = e || window.event || {};
var charCode = e.charCode || e.keyCode || e.which;
if(charCode == 27){
return false;
}
}
Searched a lot in Stack overflow and google.Nothing worked.Please any one help me to do that . Thanks..
You can bind an eventlistener to your input field to catch the Event when Esc is pressed and supress it.
document.querySelector("input").addEventListener("keydown",function(e){
var charCode = e.charCode || e.keyCode || e.which;
if (charCode == 27){
alert("Escape is not allowed!");
return false;
}
});
Example
I got the solution to control the " F5 , Esc , BackSpace(BS) " keys with the following code.
My Java Script code will be ,
document.attachEvent("onkeydown", win_onkeydown_handler);
function win_onkeydown_handler() {
switch (event.keyCode) {
case 116 : // 'F5'
event.returnValue = false;
event.keyCode = 0;
break;
case 27: // 'Esc'
event.returnValue = false;
event.keyCode = 0;
break;
case 08: // 'BackSpace'
if (event.srcElement.tagName == "INPUT"
|| event.srcElement.tagName == "TEXTAREA") {
} else {
event.returnValue = false;
event.keyCode = 0;
}
break;
}
}
Thanks who are all supported me to do this and for your suggestions.
I have used this for a login popup code:
jQuery(document).keyup(function(e){
if(e.keyCode==27 && popupStatus==1){
// alert('not allowed !!!');
// or any other code
return false;
}
});
I have done something similar using jquery to limit entry to numbers
$(inputBox).keydown(function(event) {
// Allow only backspace and delete
var allowed_keys = [
46, // delete
8, // backspace
];
if ($.inArray(event.keyCode, allowed_keys) != -1) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
Anyone know how can I disable backspace and delete key with Javascript in IE? This is my code below, but seems it's not work for IE but fine for Mozilla.
onkeydown="return isNumberKey(event,this)"
function isNumberKey(evt, obj)
{
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode == 8 || charCode == 46) return false;
return true;
}
This event handler works in all the major browsers.
function onkeyup(e) {
var code;
if (!e) var e = window.event; // some browsers don't pass e, so get it from the window
if (e.keyCode) code = e.keyCode; // some browsers use e.keyCode
else if (e.which) code = e.which; // others use e.which
if (code == 8 || code == 46)
return false;
}
You can attach the event to this function like:
<input onkeyup="return onkeyup()" />
update based on #JoeCoders comment and the 'outdatedness' of my answer, I revised it.
document.querySelector([text input element]).onkeydown = checkKey;
function checkKey(e) {
e = e || event;
return !([8, 46].indexOf(e.which || e.keyCode || e.charCode) > -1);
}
See also this jsFiddle
This code cancels backspace action.
window.onkeydown = function (event) {
if (event.which == 8) {
event.preventDefault(); // turn off browser transition to the previous page
// put here code you need
};
};
$(document).keydown(function(e) {
if (e.keyCode === 8) {
var element = e.target.nodeName.toLowerCase();
if ((element != 'input' && element != 'textarea') || $(e.target).attr("readonly")) {
return false;
}
}
});