拉伸HTML输入框和其他输入？

Question

我在这个网站上使用jQuery，它有表单输入。当用户输入数据并且空间耗尽时，我希望某个特定字段变长（宽度）。

如何计算 ACTUALLY 何时需要输入（type="text"）更长？对一个浏览器有效的方法可能不适用于所有浏览器。

这是一个无法计算的东西，所以每个人都根据每个浏览器中的反复试验来做这件事吗？我是否需要求助于此并使用.keyup（）调整拉伸值检查值？.. EG ..

$(".stretchInput").keyup( function(event) {
   var someValueAdjustedByTrialAndError = 30;
   var stretchPastLength = someValueAdjustedByTrialAndError;
   var stretchBy = 5;
   var baseWidth = 100;
   if ($(this).val().length > stretchPastLength ) {
      $(this).css('width',(baseWidth + ($(this).val().length - stretchPastLength ) * stretchBy ) + 'px');
   } else {
      $(this).css('width','');
   }
});

Answer 1

[更新以检测退格]

在页面上放置一个隐藏的<span>元素，在keyup字段的<input>事件中，您可以镜像范围内的输入值。更新输入字段宽度以匹配您的跨度。

<强> HTML

<span style="display:none"></span>
<input type="text" style="width:100px"; />

注意输入元素上的min-width值，以防止宽度缩小到某个值以下。

<强> jQuery的：

$('input').keyup(function() {
    var $span = $('span');
    var $this = $(this);
    $span.text($this.val()); 
    $this.width($span.width());
});

Answer 2

TextAreas的解决方案

描述

这听起来像你想在facebook上一样自动增长textarea 。如果是这样 为什么重新发明轮子？ 我鼓励你使用精彩的Elasting jQuery Plugin。

  

弹性使你的textareas成长和缩小以适应它的内容。它的灵感来自Facebook上的自动增长textareas。 Elastic和它的竞争对手之间的主要区别在于它的重量。

更多信息

• jsFiddle Demonstration
• jQuery Elastic Plugin

文本输入解决方案

这是我对input元素的解决方案。

问题是char的宽度在每种字体上都不是均匀。

如果您选择快递作为字体，则可以使其完美。

示例

<强> HTML

<input class="stretchInput" style="font-family: courier"/>

<强>的jQuery

var initialWidth = $(".stretchInput").width();
$(".stretchInput").keyup( function(event) {
   var charWidth = 8.5;
   var width = $(this).val().length*charWidth;
   if ($(this).width() < width)
   {
       $(this).width(width);
   } else {
       $(this).width(initialWidth );
   }
});

查看我的jsFiddle