[CLOSED] How to prevent quotes in NumberField

**aluna** · Jul 25, 2020, 7:27 PM

Hello,

I want to prevent single- and double-quotes in NumberField input, but don't know how.
This is my code:

<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var validateNum = function (field, e) {
            if (event.keyCode == 16 || event.keyCode == 222) {
                e.stopEvent();
            }
        }
    </script>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" /> 
        <div>
            <ext:NumberField ID="qty" runat="server" AllowBlank="false" FieldLabel="Qty" AllowNegative="false" AllowDecimals="false"
                Width="261" MaxLength="6" MinLength="1" MinValue="1" EnableKeyEvents="true">
                <Listeners>
                    <KeyDown Fn="validateNum" />
                </Listeners>
            </ext:NumberField>
        </div>
    </form>
</body>
</html>

I use an English keyboard with International distribution. So, when I press the quote key, nothing appears, but if I press a number key, the quote appears followed by the number pressed. Same happens with double-quote key.

How to avoid that behaviour and completely prevent quotes appearing in NumberField?

Thank you

**fabricio.murta** · Jul 25, 2020, 10:23 PM

Hello Alex!

Have you tried return false from the handler function?

Hope this helps!

**aluna** · Jul 25, 2020, 10:51 PM

Hello Fabricio,

Returning false after stopEvent() doesn't change the behaviour.

        var validateNum = function (field, e) {
            if (event.keyCode == 16 || event.keyCode == 222) {
                e.stopEvent();
                return false;
            }
        }

The problem persists.

**aluna** · Jul 25, 2020, 11:45 PM

Here's a way to remove quotes from the value as user types. The ugly thing here is that the quotes are displayed and then deleted.

<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>
<script runat="server">
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <ext:XScript ID="XScript1" runat="server">
    <script type="text/javascript">
        var validateNumU = function (field, e) {
            var str = #{qty}.rawValue;
            while (str.indexOf("'") > -1 || str.indexOf('"') > -1)
                str = str.replace("'", "").replace('"', "");
            #{qty}.setValue(str);
        }
    </script>
    </ext:XScript>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" /> 
        <div>
            <ext:NumberField ID="qty" runat="server" AllowBlank="false" FieldLabel="Qty" AllowNegative="false" AllowDecimals="false"
                Width="261" Cls="text-right" MaxLength="6" MinLength="1" MinValue="1" EnableKeyEvents="true">
                <Listeners>
                    <KeyUp Fn="validateNumU" />
                </Listeners>
            </ext:NumberField>
        </div>
    </form>
</body>
</html>

I hope someone can come up with a more 'elegant' solution to avoid the quotes appearing in the input.
Regards

**fabricio.murta** · Jul 28, 2020, 5:57 PM

Hello Alex Luna!

I have just tried here your example, enabled a keyboard layout with said "dead keys" (quotes can be used for Ã¡, Ã¤, and Ã§) and even without any event in the NumberField, I couldn't input any extra characters (not numbers, minus, or the 'e' character). I used the US-international and Bazil-ABNT2 layouts with no luck. At least while using the Chrome browser. Maybe you can reproduce this only on a given browser?

When a "dead key" is stored ("held"), I don't think the browser would fire a key event. And when another key is pressed (when there's no accented version of the character), the event will probably only fire for the key just pressed, not for the accent one. This is a possibility, though. Even if the event is fired for the dead key, it won't be sending anything actually so at that point maybe it is not going to work.

So maybe instead of keypresses, you may focus in the change event. Or even the blur (focus-out) event to validate the field and make the cleanup.

But no matter what, I don't think we can go too much off the scenario you described. Yet I'm not sure how you even can reproduce it, as even with a deadkeys keyboard layout here I couldn't reproduce the issue.

Any chance you may be using an older Ext.NET version where this is reproducible? Browser-specific? OS-specific, maybe (that's also possible)?

Anyways, thanks for sharing the solution that best worked for you. If you want us to try something potentially more performatic, we'd need to be able to reproduce the issue, so we'll need a little more context to be able to reproduce it on our end.

Hope this helps!

**aluna** · Jul 29, 2020, 2:27 PM

Hello Fabricio,

I have just tried here your example, enabled a keyboard layout with said "dead keys" (quotes can be used for Ã¡, Ã¤, and Ã§) and even without any event in the NumberField, I couldn't input any extra characters (not numbers, minus, or the 'e' character). I used the US-international and Bazil-ABNT2 layouts with no luck. At least while using the Chrome browser. Maybe you can reproduce this only on a given browser?

The problem seems to happen only in Firefox (I'm using v78). In Chrome, Edge, Opera, IE11 quotes are not displayed, even without any event to prevent it.

So maybe instead of keypresses, you may focus in the change event. Or even the blur (focus-out) event to validate the field and make the cleanup.

I've used keyup event because calculations are performed using the quantity typed as user types.

Any chance you may be using an older Ext.NET version where this is reproducible? Browser-specific? OS-specific, maybe (that's also possible)?

I'm using Ext.Net 5.2

Because most of my users use Firefox, I will keep the 'fix' of removing quotes at keydown event.
Thank you

Edit: I also found out that Firefox also allows characters like

! # $ % & (

in NumberField even when MaskRe="[0-9]" is defined, nonsense...

**fabricio.murta** · Jul 29, 2020, 7:04 PM

Hello Alex!

Can you confirm that, always, when you move away from the field, any bad input character gets removed from the field?

That is in the affected browser, Firefox. I could reproduce the issue and, the change event only fires when the bad character is at the first position in the field ('7, ' but not when 7', 87% and so on).

**fabricio.murta** · Jul 29, 2020, 7:42 PM

Hello again, Alex!

I believe the issue you had initially in the event code you written was that the reference to window.event.keyCode reference was not really matching the quotes.

If you make the check broader though, I believe you can have it working. Do you accept dots, comma or any other non-numeric characters in the input?

If the only valid input is 0-9, then this should do:

var validateNum = function (field, e) {
    if (!(e.keyCode >= 48 && e.keyCode <= 57)) {
        Ext.toast("Invalid Char."); // once happy with the result, remove this
        e.stopEvent();
    }
}

Also to make things a little less burdened to the browser, use the KeyPress event instead of KeyDown:

<KeyPress Fn="validateNum" />

This didn't seem to break other browsers, so it should be safe to rely on the solution. Notice I preferred to rely on the passed e variable instead of the global window.event just for consistency -- guarantees I'm stopping the event where the key press was checked against.

Tested in Firefox 78.0.2 and 79.0 I updated right at this moment. A quick test in other browsers raised no issues either.

Hope this helps!

**aluna** · Jul 30, 2020, 3:34 AM

Hello Fabricio,

My English keyboard has a dedicated key for single-quote and double-quote, and testing on https://keycode.info/ showed keyCode = 222, but testing with Spanish keyboards where the double-quote is over the number 2, the keyCode is different.

Can you confirm that, always, when you move away from the field, any bad input character gets removed from the field?
That is in the affected browser, Firefox. I could reproduce the issue and, the change event only fires when the bad character is at the first position in the field ('7, ' but not when 7', 87% and so on).

I wasn't using the Change event, because I make some calculations as user types, even before leaving the field.

If you make the check broader though, I believe you can have it working. Do you accept dots, comma or any other non-numeric characters in the input?

If the only valid input is 0-9, then this should do:

Yes, that did the trick, and accepting decimal separator (period) is just a matter of changing the if condition to

!((e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 190)

Also to make things a little less burdened to the browser, use the KeyPress event instead of KeyDown:
This didn't seem to break other browsers, so it should be safe to rely on the solution. Notice I preferred to rely on the passed e variable instead of the global window.event just for consistency -- guarantees I'm stopping the event where the key press was checked against.

You're right, I will change to KeyPress event.
Thank you very much for your time and help.
Please mark this as solved.

**fabricio.murta** · Jul 31, 2020, 8:38 PM

Glad it helped, thanks for the feedback!

Thread: [CLOSED] How to prevent quotes in NumberField

Thread Tools

Search Thread

Display

[CLOSED] How to prevent quotes in NumberField

Similar Threads

[CLOSED] Deserilization Parsing Error with Double Quotes

[CLOSED] [1.0] Store wraps GUID value with quotes (serialization)

RecordField DefaultValue missing quotes v0.6

ext:Panel AutoScroll quotes bug v.0.6.0

[CLOSED] TextArea Double Quotes?

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] How to prevent quotes in NumberField

[CLOSED] How to prevent quotes in NumberField

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us