auto resizing text field

**midhul** · 05-26-2008, 01:20 PM

I wold like a javascript code that can automatically resize a textfield.
example: there is a textfield of size 6 if the content crosses limit the text
field will regularly hide before content. But i want it to expand its size and adjust to show the complete text!

**jscheuer1** · 05-26-2008, 02:08 PM

This seems to work out fairly well in limited testing:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function reSizeField(field, e){
if (e && e.keyCode){
// document.getElementById('kc').value=e.keyCode; //diagnostic use only
if (e.keyCode>=36 && e.keyCode<=40 || e.keyCode==20 || e.keyCode==9) return;
}
var r=document.getElementById('resizer');
r.firstChild.nodeValue = field.value;
if (e && e.keyCode && e.keyCode!=46)
field.value = '';
field.style.width = Math.max(document.getElementById('reference').offsetWidth, r.offsetWidth)+'px';
if (e && e.keyCode && e.keyCode!=46)
field.value = r.firstChild.nodeValue;
}
</script>
</head>
<body>
<input id="reference" type="text" size="6" style="font-size:90%;font-family:sans-serif;border:none;position:absolute;top:-1000px;left:-1000px;visibility:hidden;">
<span id="resizer" style="font-size:90%;font-family:sans-serif;position:absolute;top:-1000px;left:-1000px;visibility:hidden;">&nbsp;</span>
<input type="text" style="font-size:90%;font-family:sans-serif;" size="6" onkeyup="reSizeField(this, event);" onmousemove="reSizeField(this, event);" onchange="reSizeField(this, event);"><br>
<!-- <input type="text" id="kc"> diagnostic use only -->
</body>
</html>

Thread: auto resizing text field

Thread Tools

Search Thread

auto resizing text field

Bookmarks

Bookmarks

Posting Permissions