Disable Chrome's text input undo/redo (CTRL+Z / CTRL+Y) - javascript

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

How to prevent Chrome open history after press CTRL+H

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();
}

How to allow only numbers in a texbox but also allow entry with French keyboard

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

How can i disable the ctrl + a using javascript?

<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

how to disable the function of ESC key in JavaScript?

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();
}
}
});

Disable backspace and delete key with javascript in IE

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;
}
}
});

Categories