Click here to Skip to main content
14,831,860 members
Please Sign up or sign in to vote.
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
Updated 28-Dec-10 4:03am
v2
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! :)

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
   
v4
Comments
JF2015 28-Dec-10 12:34pm
   
Good one! Have my 5
Sergey Alexandrovich Kryukov 28-Dec-10 19:04pm
   
Very good. My 5.
Kasson 29-Dec-10 0:19am
   
Good Answer My 5 too
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..
   
v2

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900