How to disable space on smart phone using jQuery in ASP.Net

Last Reply on Jul 21, 2017 08:45 AM By power

Posted on Jul 18, 2017 02:02 AM

Hello,

I am using the code below to allow certain characters into username or other textboxs. The main goal is if user accidently touches spacebar, the code should prevent spacebar from adding any space. The code works fine on my laptop. However, this code doesn't work on smartphone. I checked it on my smartphone (Samsung) and it adds space when I click spacebar. Can you tell me what is missing from this code to prevent space when a user uses smartphones and touches spacebar?

 function IsAlphaNumericUsername(e) {
            var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode;
            var ret = ((keyCode == 13) || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode));
            document.getElementById("errorUsername").style.display = ret ? "none" : "inline";
            return ret;
        }

 

Results 1 - 5 of 10 12
Posted on Jul 18, 2017 02:37 AM Modified on on Jul 19, 2017 02:38 AM

Hi power,

What you can do is simply replace white space character like below.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" id="txtNoSpaces" onpaste="return false;" />
    </div>
    <div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#txtNoSpaces').keyup(function () {
                    str = $(this).val()
                    str = str.replace(/\s/g, '')
                    $(this).val(str)
                });
            });
        </script>
    </div>
    </form>
</body>
</html>

Demo

 


Posted on Jul 18, 2017 08:14 AM

The code you gave me still adds space when spacebar is pressed. Try it to yourself on smart phone. 


Posted on Jul 18, 2017 10:31 AM Modified on on Jul 20, 2017 08:32 AM

Check with the below code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[ID*=txtUsername]').keyup(function () {
                str = $(this).val()
                str = str.replace(/\s/g, '')
                $(this).val(str)
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtUsername" runat="server" onpaste="return false;"></asp:TextBox>
    </div>
    </form>
</body>
</html>

Posted on Jul 19, 2017 08:13 PM

This time your demo works good when I check it on my phone.  However, when I copy your code and put it to mine, it didn’t work and I don’t know why.  Then the one difference I noticed between your example and my project is that you used

 <div><input type="text" id="txtNoSpaces" onpaste="return false;" /></div> 

But I used

<asp:TextBox ID="txtUsername" runat="server"  onpaste="return false;"></asp:TextBox>

Do you think the fact that I am using asp:TextBox is the reason why it is not working? Can you please modify the javascript to make it work for asp:TextBox?

Thanks for the help.


Posted on Jul 20, 2017 02:11 AM
AnandM says:
<script type="text/javascript">
            $(document).ready(function () {
                $('#txtNoSpaces').keyup(function () {
                    str = $(this).val()
                    str = str.replace(/\s/g, '')
                    $(this).val(str)
                });
            });
        </script>

 above code is not working for your side is because the textbox id txtNoSpaces is passed by me to the function while your id is txtUsername so your code will look like below.

<script type="text/javascript">
       $(document).ready(function () {
            $('#txtUsername').keyup(function () {
                 str = $(this).val()
                 str = str.replace(/\s/g, '')
                 $(this).val(str)
             });
       });
</script>