Log in

View Full Version : form field data that is longer than the width of the box


walkerweb
11-21-2007, 10:11 AM
Hi,
Quick question really, and feel a bit dense asking it! When you have a text box that is say width=30, but your user puts a long piece of text in, when you tab out (in IE7 and FF2.0.0.9 at least!) the textbox still shows the last characters you put in. Is it possible to have it return to the start and show the first characters entered instead (effectively left justifying it)? I'm not sure if this is something that is controlled by the browser, or something that can be changed with code.
Can anyone help?
Thanks
Ali
jscheuer1
11-21-2007, 03:06 PM
There may be a pure HTML way to do this, but I don't know it if there is one. Javascript can do it:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function lineText(el){
var save=el.value;
el.value='';
setTimeout(function(){el.value=save;}, 0);
}
</script>
</head>
<body>
<form action="#">
<div>
<input type="text" onblur="lineText(this);"><br>
<input type="text">
</div>
</form>
</body>
</html>
walkerweb
11-21-2007, 04:11 PM
Excellent, that's just what I needed, thanks very much!
Ali
jscheuer1
11-21-2007, 05:42 PM
If you like that and want to do it for all of your text fields, you can do this:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form action="#">
<div>
<input type="text"><br>
<input type="TEXT"><br>
<input><br>
<input type="button" value="this button does nothing really">
</div>
</form>
<script type="text/javascript">
;(function(){if(!document.getElementsByTagName)return;for(var x,y=
function(e){var z=e&&e.target?e.target:event.srcElement,s=z.value;
z.value='';setTimeout(function(){z.value=s;},0);},t=
document.getElementsByTagName('input'),i=t.length-1;i>-1;--i)
if((x=t[i].getAttribute('type',0))=='text'||x==null)t[i].onblur=y;})();
</script>
</body>
</html>

The script could even be made external and used with multiple pages. It must appear or be linked as the very last thing before the </body> tag (or at least be after all text inputs on the page that you want this treatment given to).