PDA

View Full Version : Resolved 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.




<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:


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
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.


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).




<!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"