auto-resizing text input box html
Question
I created an input (type text) box and made it auto-resize quite simply. However, there are a few glitches that I can't seem to fix:
- when I start typing the box shrinks a tiny bit
- when I press backspace (or directional arrows), the box expands first, and then shrinks when I continue typing.
Here is my code:
function Expander() { this.start = function () { $("#inputbox").keydown(function(e) { this.style.width = 0; var newWidth = this.scrollWidth + 10; if( this.scrollWidth >= this.clientWidth ) newWidth += 10; this.style.width = newWidth + 'px'; }); } } $(function() { window.app = new Expander(); window.app.start(); });
input { margin-left:3em; min-width:100px; max-width:600px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <meta charset="UTF-8"> <body> <div id="wrap"> <input type="text" id="inputbox" name="input" placeholder="I want this to resize smoothly." width="100px"/> </div> <div id="counter"></div> </body>
3 answers
solution1
3 2013-10-17 11:47:42
You can try this.
We put the content in a hidden span & then adjust width according to span scrollWidth.
function Expander() { this.start = function () { $('#inputbox').on('keydown',function(e) { $("#hidden_span").html(""); $("#hidden_span").append("<p>"+$(this).val()+"</p>"); var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth; if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){ $(this).css("width",hidden_span_scroll_width); } }); } } $(function() { window.app = new Expander(); window.app.start(); });
input { margin-left:3em; min-width:100px; max-width:600px; } #hidden_span{ position:absolute; top:0px; left:0px; visibility:hidden; width:10px; white-space:nowrap; overflow:hidden; }
<head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> </head> <body> <div id="wrap"> <input type="text" id="inputbox" name="input" placeholder="I want this to resize smoothly." /> </div> <div id="counter"></div> <span id="hidden_span"></span> </body>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<title>Test page</title>
</head>
<body>
<style>
input {
margin-left:3em;
min-width:100px;
max-width:600px;
}
#hidden_span{
position:absolute;
top:0px;
left:0px;
visibility:hidden;
width:10px;
white-space:nowrap;
overflow:hidden;
}
</style>
<script>
function Expander() {
this.start = function () {
$('#inputbox').on('keydown',function(e) {
$("#hidden_span").html("");
$("#hidden_span").append("<p>"+$(this).val()+"</p>");
var hidden_span_scroll_width=$("#hidden_span")[0].scrollWidth;
if(hidden_span_scroll_width> 100||hidden_span_scroll_width< 600){
$(this).css("width",hidden_span_scroll_width);
}
});
}
}
$(function() {
window.app = new Expander();
window.app.start();
});
</script>
<div id="wrap">
<input type="text" id="inputbox" name="input" placeholder="yes" />
</div>
<div id="counter"></div>
<span id="hidden_span"></span>
</body>
</html>
solution2
0 2013-10-17 11:33:06
At first you can use jQuery methods to avoid crossbrowser problem. And scrollWidth returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. So enlarge newWidth only when content width strongly larger than element width.
$("#inputbox").keydown(function(e) {
var a = $(this).width(), newWidth;
if(this.scrollWidth - a > 0){
newWidth = a + 10;
}else if(e.keyCode==8){
newWidth = a - 10;
}
$(this).css("width", newWidth);
});
If you don't want to make input smaller when pressed backspace - delete else if part of code.
solution3
-1 2013-10-17 11:23:06
<input type="text" id="inputbox" name="input" placeholder="yes" width="100px"/>
Remove the width="100px" , like this:
<input type="text" id="inputbox" name="input" placeholder="yes"/>
And it won't resize down anymore when starting to type.
Live example:
Though, the exanding function doesn't seem to work in my browser?
*Edit, did a simple expand function on the inputbox is this what you where trying? http://jsfiddle.net/2EMfd/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.