What's New?

[CLOSED] TextField KeyPress handler for the Backspace key

  1. #1
    Mar 14, 2012, 1:20 PM

    [CLOSED] TextField KeyPress handler for the Backspace key

    Hi,

    Is there any way to handle the Backspace key pressed within a TextField control? If the TextField is not read-only, I need to treat the backspace key press as a change to the input string. Otherwise, ignore it.

                                        <ext:TextField ID="TextField1" runat="server"
                                        EnableKeyEvents="true" AllowBlank="false">
                                        <Listeners>
                                            <KeyPress Handler="if(!this.readOnly){handleOtherControls();}" />
                                        </Listeners>
                                    </ext:TextField>
    Thanks,

    Vadym
    Last edited by Daniil; Mar 15, 2012 at 1:01 PM. Reason: [CLOSED]
  2. #2
    Mar 14, 2012, 1:25 PM
    Hi,

    Please follow:
    http://forums.ext.net/showthread.php?15462
  3. #3
    Mar 14, 2012, 2:48 PM
    Hi Daniil,

    That solution in general works. However, there're a few shortcomings to it that make the UI behavior non-standard:
    1. If you hit backspace on a non-readonly text field with the initial text, the cursor moves to the beginning of the control
    2. With the text highlighted, hitting the backspace key should wipe it out. Instead, only the last character is removed.


    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:KeyMap ID="KeyMap1" runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
        <ext:KeyBinding>
            <Keys>
                <ext:Key Code="BACKSPACE" />
            </Keys>
            <Listeners>
                <Event Handler="var id = Ext.fly(e.getTarget()).getAttribute('id'),
                                        t = Ext.getCmp(id),
                                        v;
                                    if (t instanceof Ext.form.TextField) {
                                        e.preventDefault();
                                        if (!t.readOnly) {
                                            v = t.getValue();
                                            if (v) {
                                                t.setValue(v.substring(0, v.length - 1));
                                            }   
                                        }
                                    };" />
            </Listeners>
        </ext:KeyBinding>
    </ext:KeyMap>
    <ext:TextField ID="TextField1" runat="server" ReadOnly="true" Text="Text" FieldLabel="ReadOnly" />
    <ext:TextField ID="TextField2" runat="server" ReadOnly="false" Text="Text" FieldLabel="Not ReadOnly" EnableKeyEvents="true"></ext:TextField>
    <ext:TextField ID="TextField3" runat="server" ReadOnly="true" Text="Text" FieldLabel="ReadOnly" />
    </form>
</body>
</html>
    Please advise if there's any better way to handle this key event as not to rewrite the default behavior.

    Thanks,

    Vadym
  4. #4
    Mar 14, 2012, 7:32 PM
    Well, answering your initial question:
    <ext:TextField runat="server" EnableKeyEvents="true">
    <Listeners>
        <KeyPress Handler="if (e.getKey() === e.BACKSPACE) {
                                //backspace key handler
                            }" />
    </Listeners>
</ext:TextField>
    Hope this helps.
  5. #5
    Mar 14, 2012, 8:20 PM
    Quote Originally Posted by Daniil View Post
    Well, answering your initial question:
    <ext:TextField runat="server" EnableKeyEvents="true">
    <Listeners>
        <KeyPress Handler="if (e.getKey() === e.BACKSPACE) {
                                //backspace key handler
                            }" />
    </Listeners>
</ext:TextField>
    Hope this helps.
    Hi Daniil,

    I'm probably missing something in the TextField attributes configuration but KeyPress handler doesn't fire when I press Backspace.

    Thanks,

    Vadym
  6. #6
    Mar 14, 2012, 8:32 PM
    What browser do you test with?

    Please try the SpecialKey listener instead of the KeyPress one.
  7. #7
    Mar 14, 2012, 8:50 PM
    Quote Originally Posted by Daniil View Post
    What browser do you test with?

    Please try the SpecialKey listener instead of the KeyPress one.
    I'm testing it under IE9. Here's the sample that I put together based on your suggestions:

                                        <ext:TextField runat="server" EnableKeyEvents="true">
                                        <Listeners>
                                            <SpecialKey Handler="if (e.getKey() === e.BACKSPACE) {
                                                                    if(!this.readOnly) {
                                                                        // do something here
                                                                    }
                                                                    else {
                                                                        e.preventDefault(); // prevent the default backspace behavior
                                                                    }
                                                                 }" />
                                            <KeyPress Handler="if(!this.readOnly) {/* do something here */ }" />
                                        </Listeners>
                                    </ext:TextField>
    Note that I had to provide two listeners as having just SpecialKey handler didn't work for a regular character input. This approach works. I have two questions: is it correct overall and will it work for every browser?

    Thanks,

    Vadym
  8. #8
    Mar 14, 2012, 10:19 PM
    Confirmed, KeyPress doesn't catch Backspace key in IE9.

    This approach works. I have two questions: is it correct overall and will it work for every browser?
    Yes, I think it should work ok.

    Though I would try to use a single KeyUp listener instead of KeyPress event to avoid using two - SpecialKey and KeyPress - listeners.

    KeyUp catches Backspace key in IE.
  9. #9
    Mar 15, 2012, 12:49 PM
    Quote Originally Posted by Daniil View Post
    Confirmed, KeyPress doesn't catch Backspace key in IE9.



    Yes, I think it should work ok.

    Though I would try to use a single KeyUp listener instead of KeyPress event to avoid using two - SpecialKey and KeyPress - listeners.

    KeyUp catches Backspace key in IE.
    Thanks Daniil!

    KeyUp listener works. Predictably, it doesn't fire until the key is released so the input can be modified with multiple identical characters before any action can be taken. However, it's minor. I will decide which approach to pursue but it looks like both should work fine. You can close this thread.

                                        <ext:TextField runat="server" EnableKeyEvents="true">
                                        <Listeners>
                                            <KeyUp Handler="if (e.getKey() === e.BACKSPACE) {
                                                                    if(!this.readOnly) {
                                                                        // do something here
                                                                    }
                                                                    else {
                                                                        e.preventDefault();
                                                                    }
                                                            }
                                                            else {
                                                                    if(!this.readOnly) {
                                                                        // do something here
                                                                    }                                                            
                                                            }" />
                                        </Listeners>
                                    </ext:TextField>
    Thanks,

    Vadym
  10. #10
    Mar 15, 2012, 1:01 PM
    Quote Originally Posted by vadym.f View Post
    KeyUp listener works. Predictably, it doesn't fire until the key is released so the input can be modified with multiple identical characters before any action can be taken. However, it's minor.
    There is also the KeyDown event.

Similar Threads

  1. [CLOSED] Trying to remove character for TextField in Javascript on KeyPress.
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 03, 2012, 6:43 PM
  2. textfield keypress listeners
    By okutbay in forum 1.x Help
    Replies: 3
    Last Post: May 04, 2010, 2:39 AM
  3. [CLOSED] TextField SpecialKey Submit and Enter/Backspace
    By macap in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 28, 2010, 4:20 PM
  4. [CLOSED] Add mask to textfield keypress
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 26, 2010, 4:46 PM
  5. simple scenario..but not invoking KeyPress event handler..how possible?
    By joydeepsen in forum 1.x Help
    Replies: 1
    Last Post: Jun 12, 2009, 5:14 AM

Posting Permissions