Results 1 to 7 of 7

Thread: Disabling the leading whitespace in an input field

  1. #1
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default Disabling the leading whitespace in an input field

    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">
    Last edited by qwikad.com; 01-08-2014 at 01:04 AM.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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.
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    qwikad.com (01-08-2014)

  4. #3
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

    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.

  5. #4
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

    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.

  6. #5
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by qwikad.com View Post
    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.

    Quote Originally Posted by qwikad.com View Post
    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.
    Jeremy | jfein.net

  7. #6
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

    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>

  8. #7
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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"
    Jeremy | jfein.net

Similar Threads

  1. Replies: 7
    Last Post: 06-03-2013, 01:01 AM
  2. How to validate input in RTE form field?
    By Colin in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 12-19-2009, 02:41 AM
  3. Input field help.
    By SDB in forum PHP
    Replies: 2
    Last Post: 12-06-2007, 10:29 AM
  4. dynamic input field
    By developing in forum Looking for such a script or service
    Replies: 0
    Last Post: 12-05-2007, 06:57 PM
  5. Field Input Limiter
    By quintin in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-08-2006, 10:00 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •