PDA

View Full Version : how to disable the 'backspace' key?



aj3423
8 Oct 2010, 1:02 AM
sometimes I press 'backspace', the browser goes backward (:|, this is very annoying.
I tried this

(Ext.isIE ? document: window).onkeydown = function(event) {
var e = Ext.isIE ? window.event: event;

// disable key "backspace" when target is document
var type = Ext.isIE ? e.srcElement.type: e.target.type;
if (e.keyCode === 8 && ! type) {
return false;
}
};

the problem is: when I focus a combobox that not editable, then I press 'backspace', the 'type' is 'text', so it won't return false and the browser will refresh.
Any idea about this?
Thanks in advance.

steffenk
8 Oct 2010, 1:34 AM
it seems noone read the stickies and respect that this is not the place for help requests :(

aj3423
8 Oct 2010, 5:33 AM
ha, steffenk, I followed you and read the sticky:
Sticky: **** READ ME FIRST **** - Guidelines, FAQs, Resources etc

but didn't found anything about the 'backspace' key, and I did some search in forum:
site:extjs.com backspace , and tried many other key words
but found nothing.
Could you give a link?
Thank you .

Condor
8 Oct 2010, 5:57 AM
@steffenk meant the sticky about not asking help in the General Discussion forum!

I'm moving this thread to the Help forum.

aj3423
8 Oct 2010, 6:03 AM
ha, I post in the General Discussion forum, it's a mistake:)

troseberry
8 Oct 2010, 6:04 AM
If you want to stop the browser from going back then you can try something like this.



Ext.EventManager.on(window, 'beforeunload', function(e) {
e.stopEvent();
});

Condor
8 Oct 2010, 6:10 AM
You could check if the element is an <input> that is not disabled or readOnly, e.g.

Ext.EventManager.on(window, 'keydown', function(e, t) {
if (e.getKey() == e.BACKSPACE && (!/^input$/i.test(t.tagName) || t.disabled || t.readOnly)) {
e.stopEvent();
}
};

aj3423
8 Oct 2010, 8:29 PM
oyeah, this is what I want, Thank you troseberry and Condor~

aj3423
8 Oct 2010, 10:11 PM
I found another problem, the code is ok for firefox, but in IE8, the
Ext.EventManager.on(window, 'keydown', function(e, t) {
doesn't work, I set breakpoint in the function but it never breaks.

Condor
8 Oct 2010, 10:15 PM
Strange... Maybe you need to use (Ext.isIE ? document : window) instead of window after all.

aj3423
9 Oct 2010, 12:29 AM
Ext.EventManager.on(document, 'keydown', function(e, t) {

ha, the 'documnet' works for both Firefox and IE8

Thanks Condor

chaitupash
4 Nov 2010, 7:48 AM
Thank you very much....it helped me a lot...Cheers

Tod
9 Nov 2011, 1:34 PM
I am using 3.3 and this technique -- it works fine for elements not in a grid. For grids and their contents, specifically comboBoxes, the keydown event never triggers the function. Is this the best one can do, or is something else needed?

Thanks,
-Tod

Tod
10 Nov 2011, 6:35 AM
I was able to trap backspace on the comboBoxes by setting the property enableKeyEvents and listening for keydown. So, problem solved, though it would be much nicer if I didn't have to configure each comboBox separately to trap backspace.

ing.amdangelo
25 Jan 2012, 7:24 AM
Where i insert that code ??

Tod
7 Mar 2012, 2:33 PM
My comboboxes have:

listeners: {'keydown': backspaceTrapper}


The function is globallly defined as:





function

backspaceTrapper(obj, e) {if (e.getKey() == e.BACKSPACE) {e.stopEvent();}
}

eknight
8 Oct 2014, 5:44 AM
I had to do the IE fix as well as add another condition for textarea; just searching for the "input" tag disables the backspace key in textareas.


var parent = Ext.isIE ? document : window;
Ext.EventManager.on(parent, 'keydown', function (e, focused) {
if (e.getKey() == e.BACKSPACE && (!/^input$/i.test(focused.tagName) && !/^textarea$/i.test(focused.tagName)) || focused.disabled || focused.readOnly) {
e.stopEvent();
}
});

rawsonkara
12 Mar 2015, 11:26 AM
You could check if the element is an <input> that is not disabled or readOnly, e.g.

Ext.EventManager.on(window, 'keydown', function(e, t) {
if (e.getKey() == e.BACKSPACE && (!/^input$/i.test(t.tagName) || t.disabled || t.readOnly)) {
e.stopEvent();
}
};

condor your missing a ) before the ;

romero.dias
8 Apr 2015, 9:22 AM
eknight (https://www.sencha.com/forum/member.php?631355-eknight)

One way to write less code is:


/* Prevent a backspace user press */
Ext.EventManager.on(window, 'keydown', function(e, t) {
if (e.getKey() == e.BACKSPACE && (!/^input|textarea$/i.test(t.tagName) || t.disabled || t.readOnly)) {
e.stopEvent();
}
});


It works for me!

howzilla
28 Oct 2016, 10:14 AM
I have a listener on a textareafield:

listeners: {
keypress: function(obj, e) {
e.stopEvent();
}
}

It works BUT not for the backspace key.

Do you know how to get around this?

I tried what romero.dias (https://www.sencha.com/forum/member.php?243805-romero-dias) said but it prevents backspace in normal textfields also.

Thanks.

Solved it:

if (e.getKey() == e.BACKSPACE && (/^textarea$/i.test(t.tagName) || t.disabled || t.readOnly))
{
e.stopEvent();
}

Anshul0390
7 Dec 2016, 10:20 PM
I had to do the IE fix as well as add another condition for textarea; just searching for the "input" tag disables the backspace key in textareas.


var parent = Ext.isIE ? document : window;
Ext.EventManager.on(parent, 'keydown', function (e, focused) {
if (e.getKey() == e.BACKSPACE && (!/^input$/i.test(focused.tagName) && !/^textarea$/i.test(focused.tagName)) || focused.disabled || focused.readOnly) {
e.stopEvent();
}
});


Hi,
Could you please tell us if Backspace can be disabled in HTML Editor in IE.