I want to trim any spaces at the start of the text box and trim any spaces at the end of the textbox. So I have found this code on a website which is suppose to remove spaces at the start, end and multiple spaces in between:

function trim(s) {
    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n");
    return s;
}

My problem is though that first of all which one of the 3 lines of code is the one where it trims spaces in the middle because I don't need that one. But the main question is how do I get the textbox to access this function?

I tried using onkeypress but this hasn't worked, below is what I have tried:

<p>Search: <input type="text" name="questioncontent" onkeypress="return trim(s)" /></p>

So what I want is that for example if this phrase is entered in textbox ' My Name is Pete '. Then it should remove the spaces at the start and end so it reads 'My Name is Pete'. But how do I get this to work?

UPDATE:

Found out that trim() is jQuery, so does anyone a javascript equivalent for this which can be hand coded to remove spaces at start and end of textbox?

I want to trim any spaces at the start of the text box and trim any spaces at the end of the textbox. So I have found this code on a website which is suppose to remove spaces at the start, end and multiple spaces in between:

function trim(s) {
    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n");
    return s;
}

My problem is though that first of all which one of the 3 lines of code is the one where it trims spaces in the middle because I don't need that one. But the main question is how do I get the textbox to access this function?

I tried using onkeypress but this hasn't worked, below is what I have tried:

<p>Search: <input type="text" name="questioncontent" onkeypress="return trim(s)" /></p>

So what I want is that for example if this phrase is entered in textbox ' My Name is Pete '. Then it should remove the spaces at the start and end so it reads 'My Name is Pete'. But how do I get this to work?

UPDATE:

Found out that trim() is jQuery, so does anyone a javascript equivalent for this which can be hand coded to remove spaces at start and end of textbox?

• javascript
• html

• $.trim() is an option if you want to use JQuery – TGH Commented May 25, 2012 at 0:51
• Oh, right, oops, so really my question is does anyone know the javascript equivalent? – user1394925 Commented May 25, 2012 at 0:53
• If you check every keypress, what about when the user types multiple words separated by spaces? Are multiple words allowed? If the user types "foo bar" at what point should trailing spaces be eliminated? If it's per character; when "foo " is entered, the space will be removed, making "foo bar" only inputable via paste. – Brigand Commented May 25, 2012 at 0:55
• @FakeRainBrigand Like I said I want the spaces to only be removed if there is one before the first word has been entered and after the last word that has been entered. No spaces in between words should be trimmed – user1394925 Commented May 25, 2012 at 1:10
• Is the function .trim() not woking. I mean take the value in the end( when the user focuses out of the input box) and replace it by .trim() version w3schools.invisionzone.com/index.php?showtopic=11773 this might help – Tejasva Dhyani Commented May 25, 2012 at 1:35

3 Answers 3

You need to change your HTML :

<p>Search: <input type="text" name="questioncontent" onchange="return trim(this)" /></p>​

Pass the input element as a parameter to trim and use onchange instead of onkeypress.

Then trim needs to be :

function trim (el) {
    el.value = el.value.
       replace (/(^\s*)|(\s*$)/gi, ""). // removes leading and trailing spaces
       replace (/[ ]{2,}/gi," ").       // replaces multiple spaces with one space 
       replace (/\n +/,"\n");           // Removes spaces after newlines
    return;
}​

This modifies the value of the input element, removing leading and trailing spaces, replacing multiple spaces with a single space, and removing any spaces after newline characters.

JSfiddle : http://jsfiddle.net/jstoolsmith/ZNQQm

Reading the comments.. it really depends on how the function is used. I attempted to test with it on onkeypress, however that didn't have your desired effect. I did however get something similar to what you desired, though I'm still unsure if that's what you wanted.

I had to modify the function slightly to work with your code, but basically, on blur, it executes the function, and alters the input text accordingly.

function trim (el) {
    el.value = el.value.
       replace (/(^\s*)|(\s*$)/, ""). // removes leading and trailing spaces
       replace (/[ ]{2,}/gi," ").       // replaces multiple spaces with one space 
       replace (/\n +/,"\n");           // Removes spaces after newlines
    return;
}​