自动调整文本输入框html

我创建了一个输入（类型文本）框，使其自动resize非常简单。 但是，有一些我似乎无法修复的故障：

1. 当我开始输入时，盒子缩小了一点点
2. 当我按退格键（或方向箭头）时，该框首先展开，然后在我继续键入时缩小。

这是我的代码：

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; } 

Answer 1

你可以试试这个。

我们将内容放在隐藏的span ，然后根据span scrollWidth调整宽度。

 function Expander() { this.start = function () { $('#inputbox').on('keydown',function(e) { $("#hidden_span").html(""); $("#hidden_span").append("
"+$(this).val()+"
"); 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; } 

Answer 2

首先，您可以使用jQuery方法来避免crossbrowser问题。 scrollWidth返回元素内容的宽度（以像素为单位）或元素本身的宽度（以较大者为准）。 因此，仅当内容宽度大于元素宽度时才放大newWidth。

 $("#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); }); 

如果您不希望在按退格键时输入较小 – 如果部分代码则删除其他内容。

Answer 3

删除width="100px" ，如下所示：

当开始输入时，它不会再resize。

实例：

http://jsfiddle.net/2EMfd/

虽然，exandingfunction似乎在我的浏览器中不起作用？

*编辑，在输入inputbox上做了一个简单的扩展function就是你在哪里尝试？ http://jsfiddle.net/2EMfd/1/