在附加输入的同时拉伸 HTML 输入框？

Question

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

当我实际上需要延长输入 (type="text") 时，我该如何计算？ 适用于一种浏览器的方法可能不适用于所有浏览器。 p>

这是无法计算的，所以每个人都会根据每个浏览器中的反复试验来计算吗？我是否需要求助于这个并使用 .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> 元素，然后在<input> 字段的keyup 事件中，您可以镜像跨度中的输入值。更新输入字段宽度以匹配您的跨度。

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 上一样。如果是这样的话 为什么要重新发明轮子？ 我鼓励你使用美妙的Elasting jQuery Plugin。

Elastic 可让您的文本区域扩大和缩小以适应其内容。它的灵感来自 Facebook 上自动增长的文本区域。 Elastic 与其竞争对手的主要区别在于它的重量。

更多信息

• jsFiddle Demonstration
• jQuery Elastic Plugin

文本输入解决方案

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

问题是每个字体的字符宽度都不是均匀。

如果你选择courier作为字体，你可以让它完美。

样本

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