Disabling the leading whitespace in an input field

**qwikad.com** · 01-07-2014, 12:07 PM

How can I disable the leading whitespace in an input field? It has to be the leading whitespace only. Other whitespaces should be allowed.

Also, it has to be done by using the field's id rather than name.

Code:

<input name="info" type="text" id="newinfo" size="30" class="input" maxlength="30">

**Nile** · 01-07-2014, 02:28 PM

You'd probably want something like:

Code:

var eventListener = function(el, type, listener) {
    if(el.addEventListener) {
        el.addEventListener(type, listener, false);
    } else if(el.attatchEvent) {
        el.attatchEvent("on"+type, listener);
    } else {
        el["on"+type] = listener;
    }
};

eventListener(document.getElementById("newinfo"), "change", function() {
    this.value = this.value.replace(/\s*(\S*)/, "$1");
});

Just make sure to choose your event listener correct to suit your needs. Also, you should double check this server-side when the alleged form is submitted.

**qwikad.com** · 01-07-2014, 03:11 PM

Thank you for the suggestion. I tried it, but it doesn't disable the leading whitespace from the get-go. I want something that, instead of replacing/trimming the leading whitespace, would not allow it to be entered in the first place. The insertion point should not move when you want to do the leading whitespace.

**qwikad.com** · 01-07-2014, 03:46 PM

This whole thing is kind of puzzling to me. I tried to do this in jquery and it works in the example ( http://jsfiddle.net/5Tax7/79/ ) but when I transfer it onto my site it stops working... Not sure why.

**Nile** · 01-07-2014, 03:58 PM

Originally Posted by qwikad.com

I want something that, instead of replacing/trimming the leading whitespace, would not allow it to be entered in the first place. The insertion point should not move when you want to do the leading whitespace.

I address this in the second sentence of my original post. You'll need to change the listener depending on what you prefer.

Originally Posted by qwikad.com

This whole thing is kind of puzzling to me. I tried to do this in jquery and it works in the example ( http://jsfiddle.net/5Tax7/79/ ) but when I transfer it onto my site it stops working... Not sure why.

Are you including jQuery? This should work on your site. Please set up an example page.

**qwikad.com** · 01-08-2014, 12:12 AM

I finally got it. I was using a wrong external file. Duh. This works (if anyone interested).

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
  
</head>
<body>
 
<input type="text">
 
<script>

$('input').keyup(function(){
    str = $(this).val()
    str = str.replace(/\s*(\S*)/, "$1")
    $(this).val(str)
});

</script>
 
</body>
</html>

**Nile** · 01-08-2014, 12:29 AM

In an effort to keep things organized, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"