Firstly, This is NOT a repeat question. Most of the similar questions, I've e across, don't preform the desired action interactively (e.g. "onkeydown", "onkeyup", etc.). I need a pure JavaScript (i.e. NO jQuery) function to disallow the first character of a text-based input to be a space or group of spaces given just the elements ID. Here is what I have:

<script type="text/javascript">

/* Don't allow the first character of a "text-based" input element
 * (e.g. text-box, text-area, editable-div's) to be a space, given
 * the elements ID ([ eID ]). [BEGIN]
 */

function noPrecedingSpace ( eID )
{

    var elmt = document.getElementById(eID);

    elmt.addEventListener("keydown", function(event)
    { 
        var strg = elmt.value;
        var lastChar = strg.charAt(strg.length - 1);

        if ((lastChar == " ")||(lastChar == "&nbsp;")||(strg == ""))
        {
            return event.which !== 32;
        };
    }); 

};

/* Don't allow the first character of a "text-based" input element
 * (e.g. text-box, text-area, editable-div's) to be a space, given the
 * elements ID ([ eID ]). [END]
 */

</script>

Any ideas as to why this is not working?

What am I doing wrong?

Please Note: "Paste" is already accounted for, and disallowed on the field by another javascript, that, by the way, is working perfectly.

JSFiddle

Firstly, This is NOT a repeat question. Most of the similar questions, I've e across, don't preform the desired action interactively (e.g. "onkeydown", "onkeyup", etc.). I need a pure JavaScript (i.e. NO jQuery) function to disallow the first character of a text-based input to be a space or group of spaces given just the elements ID. Here is what I have:

<script type="text/javascript">

/* Don't allow the first character of a "text-based" input element
 * (e.g. text-box, text-area, editable-div's) to be a space, given
 * the elements ID ([ eID ]). [BEGIN]
 */

function noPrecedingSpace ( eID )
{

    var elmt = document.getElementById(eID);

    elmt.addEventListener("keydown", function(event)
    { 
        var strg = elmt.value;
        var lastChar = strg.charAt(strg.length - 1);

        if ((lastChar == " ")||(lastChar == "&nbsp;")||(strg == ""))
        {
            return event.which !== 32;
        };
    }); 

};

/* Don't allow the first character of a "text-based" input element
 * (e.g. text-box, text-area, editable-div's) to be a space, given the
 * elements ID ([ eID ]). [END]
 */

</script>

Any ideas as to why this is not working?

What am I doing wrong?

Please Note: "Paste" is already accounted for, and disallowed on the field by another javascript, that, by the way, is working perfectly.

JSFiddle

• javascript

• How should this appear to the user, what affect are you after? You seem to want to stop the actual event but what about just stripping off the white space at the start of the element value? Do you need to do this on every key stroke or can you wait until the element looses focus? – Dave Anderson Commented Oct 22, 2015 at 23:16
• Do you have a jsfiddle to test it out? – triangulito Commented Oct 22, 2015 at 23:18
• Yes, It's necessary to check this on every keystroke because the field is a "visitors_name" field, and nobody's name starts with a space. additional I have another script to capitalize the first letter of every word in the field, so the name will be correctly capitalized, and yet another script to disallow numbers (obviously, unless they're an alien with numbers in their name). The space breaks/confuses the capitalization script (the 1st one I mentioned). – James Anderson Jr. Commented Oct 22, 2015 at 23:23
• 1 I guess you have a specific need for this style of form validation but maybe read Falsehoods Programmers Believe About Names – Dave Anderson Commented Oct 22, 2015 at 23:31
• Depending on what browsers you need to support there is also the HTML5 pattern attribute but you'll need a modern browser Can I Use: Pattern attribute for input fields – Dave Anderson Commented Oct 23, 2015 at 0:25

3 Answers 3

Returning true/false is the "old" way of managing event propagation. Better now is to use preventDefault()

var elmt = document.getElementById('noSpaces');

elmt.addEventListener('keydown', function (event) {
    if (elmt.value.length === 0 && event.which === 32) {
        event.preventDefault();
    }
});

This just checks... if the current input length is zero then a space is not allowed.

Also see the fiddle.

You can add/modify to check for non-breaking spaces also, if that's really a problem -- match with a regex like Dave's answer, but only if elmt.value.length is > 0

This, however, would let you type non-spaces, then back-up to the start of the field and insert spaces.
A revised fiddle trims leading whitespace as you're typing, but this also won't entirely solve the problem.

var elmt = document.getElementById('noSpaces');

elmt.addEventListener('keydown', function (event) {
    if (event.which === 32) {
        elmt.value = elmt.value.replace(/^\s+/, '');
        if (elmt.value.length === 0) {
            event.preventDefault();
        }
    }
});

You can keep refining it, even taking the current caret position and the currently selected text into account, but ultimately you must .trim() the string you receive on the server, since I (for one) can send you anything I want to send despite all of your javascript efforts to make me enter a "legal" string.

You can test the value of the input with a regular expression to see if it starts with a space and if so remove the spaces from the start of the value;

var input = document.getElementById('noSpaces');

input.addEventListener('keyup', function(event) {
   if(/^\s/.test(input.value)) {
     input.value = input.value.replace(/^\s+/,'');   
   }
});

JSFiddle

Thanks to @StephenP, I have e up with this final answer, which is just perfect for my needs ("visitors_name" field):

<script type="text/javascript">

/* Don't allow the first character of a "text-based" input element (e.g. text-box, text-area, editable-div's, etc.) to be a space, given the elements ID ([ eID ]). Also, don't allow more than one space between adjacent words. [BEGIN] */
/* Usage Example: noPrecedingOrDoubleSpace ("visitors_name"); */

function noPrecedingOrDoubleSpace ( eID )
{

var elmt = document.getElementById(eID);

elmt.addEventListener("keydown", function(event)
{ 
var strg = elmt.value;
var lastChar = strg.charAt(strg.length - 1);

if ((lastChar == " ")||(lastChar == "&nbsp;")||(strg == ""))
{
if (event.which === 32)
{
event.preventDefault();  
};
};
});

};

/* Don't allow the first character of a "text-based" input element (e.g. text-box, text-area, editable-div's, etc.) to be a space, given the elements ID ([ eID ]). Also, don't allow more than one space between adjacent words. [END] */

</script>

Keep in mind that if you just need no space, only at the beginning of the input, @StephenP's answer is probably more practical, and is the real answer to this question, given the title.

Also remember, that just as @StephenP mentioned, real validation is best done in the server-side script (e.g. php). This JavaScript is just to encourage correct input formatting. Nothing more, nothing less.

Big kudos to @StephenP

Thanks!

Final JSFiddle.