我找到了各种用于自动增长textarea 的插件，但没有找到输入文本字段。有没有人知道是否存在？
是否有用于文本字段的 jQuery 自动增长插件？
IT技术
javascript
jquery
scripting
2021-02-06 05:28:45
6个回答
这是一个插件，可以满足您的需求：
编辑：我已经按照 Mathias 的评论修复了插件。:)
在此处查看演示：http : //jsfiddle.net/rRHY
插件：
(function($){
$.fn.autoGrowInput = function(o) {
o = $.extend({
maxWidth: 1000,
minWidth: 0,
comfortZone: 70
}, o);
this.filter('input:text').each(function(){
var minWidth = o.minWidth || $(this).width(),
val = '',
input = $(this),
testSubject = $('<tester/>').css({
position: 'absolute',
top: -9999,
left: -9999,
width: 'auto',
fontSize: input.css('fontSize'),
fontFamily: input.css('fontFamily'),
fontWeight: input.css('fontWeight'),
letterSpacing: input.css('letterSpacing'),
whiteSpace: 'nowrap'
}),
check = function() {
if (val === (val = input.val())) {return;}
// Enter new content into testSubject
var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
testSubject.html(escaped);
// Calculate new width + whether to change
var testerWidth = testSubject.width(),
newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
currentWidth = input.width(),
isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
|| (newWidth > minWidth && newWidth < o.maxWidth);
// Animate width
if (isValidWidthChange) {
input.width(newWidth);
}
};
testSubject.insertAfter(input);
$(this).bind('keyup keydown blur update', check);
});
return this;
};
})(jQuery);
我在 GitHub 上有一个 jQuery 插件：https : //github.com/MartinF/jQuery.Autosize.Input
它使用与詹姆斯回答相同的方法，但在评论中提到了一些变化。
你可以在这里看到一个活生生的例子：http : //jsfiddle.net/mJMpw/6/
例子：
<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />
input[type="data-autosize-input"] {
width: 90px;
min-width: 90px;
max-width: 300px;
transition: width 0.25s;
}
如果你想要一个好的效果，你只需使用 css 来设置最小/最大宽度并在宽度上使用过渡。
您可以指定到末尾的空间/距离作为 input 元素上 data-autosize-input 属性的 json 表示法中的值。
当然你也可以使用jQuery初始化它
$("selector").autosizeInput();
很好的插件，谢谢！不过，我更改了两件似乎在我的项目中效果更好的东西。
- 我将 TESTER 标记更改为 DIV，以避免收到“对方法或属性访问的意外调用”。在 IE8 中（即使您的演示在 IE8 中也能运行。使用自定义 HTML 标签是否有特殊原因？
- 在靠近代码末尾的 bind 语句之后，我添加了对 check() 的调用，以便在加载页面后立即调整文本框的大小，以防文本框在启动时已经有内容。
希望这可以帮助。
只是想分享对 James 很棒的插件的一个小改进。将此代码添加到 tester 元素的 CSS 声明中以说明文本缩进：
textIndent: 0
没有它，在某些情况下，tester 元素可能会无意中从其他地方继承文本缩进，从而丢弃输入的大小。
像 JP 一样，我也想从一开始就将输入调整为正确的大小，我的做法略有不同，通过将“trigger('keyup')”链接到 autoGrowInput 方法调用，例如：
$('#contact_form').autoGrowInput({comfortZone: 7, minWidth: 10, maxWidth: 200}).trigger('keyup');
作为旁注，我注册这个网站纯粹是为了评论 James 的解决方案，我有点恼火地发现我不能，因为我没有足够的声望点开始。对不起，如果我错过了什么，但这似乎意味着我必须发布这是对主要问题的评论，而不是更恰当地发表在詹姆斯的解决方案上。
我也换了
$(this).bind('keyup keydown blur update', check)
到
$(this).bind('keyup blur update', check).bind('keydown', function() {
setTimeout(check);
});
为了在浏览器重新渲染后立即调整字段的大小。它会使场上的一些喋喋不休。