在附加输入旁边拉伸 HTML 输入框？

Question

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

如何计算何时实际上需要使输入 (type="text") 更长？ 对一种浏览器有效的方法可能无效适用于所有浏览器。

这是无法计算的东西，所以每个人都根据每个浏览器中的试验和错误来进行计算吗？我是否需要诉诸于此并使用 .keyup() 来检查拉伸值价值？..例如..

$(".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

[已更新以检测退格键]

在页面上以及 的 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 上一样的自动增长的文本区域。如果是这样
为什么要重新发明轮子？
我鼓励您使用精彩的 Eternity jQuery 插件。

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

更多信息

• jsFiddle 演示
• 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