How to restrict space between characters in textbox

Question

0.00/5 (No votes)

See more:

I want to restrict user to enter space inbetween characters in textbox.
I'm using asp.net 2.0,visual studio 2008. Can anybody suggest any javascript function to restrict user giving space entry?

Posted 28-Dec-10 4:01am

Sugato Pal

Updated 28-Dec-10 4:03am

JF2015

v2

Add a Solution

Comments

Manfred Rudolf Bihy 28-Dec-10 12:31pm

Hi Sugato, I edited my answer with working albeit messy code for a proof of concept.
Enjoy! :)

2 solutions

Solution 2

hi Sugato Pal,:rose: :thumbsdown:

Use the Trim() function.

If the TextControl Id is txtName, then use the code based on below:

string Name =  txtName.Text.Trim();

:thumbsup:

Now, space will be restrict from the textbox with Input..

Posted 29-Dec-10 17:31pm

velmahesh

Updated 29-Dec-10 17:32pm

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Manfred Rudolf Bihy · Accepted Answer · 2010-12-28T04:11:00

Hi Sugato,

you can use the onkeypress event of the input tag to react to keypresses.
While appending text at the end it would be easy: just cancel the keypress event in case there is already a space at the end of the text field, but since you may also be editing inside an existing text string you better use the onkeyup event. When the event is fired the text has already been changed. You can now replace multiple spaces with just one space using javascripts Regular Expression feature.

Modification with example:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" name="myInput" onkeyup="RemoveSpaces(this);" onkeypress="RememberCaretPos(this);"><br>
<input id="output" type="text" size="30" readonly="readonly" value""/>
<input type="reset">
</form>
<script type="text/javascript">
var inputFieldCaretPos = 0;
var lastCharacterWasGood = true;
function RemoveSpaces(element)
{
    var text = element.value;
    // Replace globally all multiple spaces with just on space
    var changed = text.replace(/[ ]+/g, " ");
    if(changed != text)
    {
        // We have to remember where the cursor was as setting the input.value
        // will place the cursor at the end of the text
        element.value = changed;
        SetCaretPosition(element, inputFieldCaretPos);
    }
    else
    {
        RememberCaretPos(element);
    }
}

function RememberCaretPos(element)
{
    var myEvent = window.event;
    var keyCode;
    var output = document.getElementById("output");
    if (myEvent.which)
    {
        keyCode = myEvent.which;
    }
    else if (myEvent.keyCode)
    {
        keyCode = myEvent.keyCode;
    }
    if (keyCode != 32 || lastCharacterWasGood)
    {
        inputFieldCaretPos = getSelectionStart(element) + 1;
        lastCharacterWasGood = (keyCode != 32);
    }
    else
        lastCharacterWasGood = false;
    output.value = inputFieldCaretPos.toString();
}

function getSelectionStart(elem) {
    if (elem.createTextRange) {
        var r = document.selection.createRange().duplicate()
        r.moveEnd('character', elem.value.length)
        if (r.text == '')
            return elem.value.length
        return elem.value.lastIndexOf(r.text)
    }
    else
    {
        return elem.selectionStart
    }
}

function SetCaretPosition(elem, position)
{
    SetRangeSelection(elem, position, position);
}

function SetRangeSelection(element, start, end)
{
    if(element.setSelectionRange)
    {
        element.focus();
        element.setSelectionRange(start, end);
    }
    else if(element.createTextRange)
    {
        var range = element.createTextRange();
        range.collapse(true);
        range.moveEnd('character', end);
        range.moveStart('character', start);
        range.select();
    }
}
</script>
</body>
</html>

This example shows how to remember the caret position as it would be set to the end of the text when the input.value is set by javascript code. The code needs to be cleaned up and cross browser compatibility implemented not by "if then", but by using jQuery or PrototypeJS. The example was tested using IE 8, but should also work on FireFox (not tested). I don't advise to use the code in this example in production, it needs to be refactored for usage on more than on input element and for cross browser compatibility.

Anyway it works! :cool:

End of Modification

Regards,

Manfred