jQuery – 根据值的宽度调整表单输入的大小？
是否有可能获得输入的值宽度并动态调整输入大小以使值适合？
这是一个例子：
http://jsfiddle.net/bzBdX/2/
这是jQuery代码：
$('input').each(function(){ var value = $(this).val(); var size = value.length; // playing with the size attribute //$(this).attr('size',size); // playing css width size = size*2; // average width of a char $(this).css('width',size*3); }); 我在GitHub上有一个jQuery插件： https ： //github.com/MartinF/jQuery.Autosize.Input
它反映了输入的值，因此它可以计算实际长度，而不是猜测或提到的其他方法。
你可以在这里看到一个实例： http ： //jsfiddle.net/jw9oqz0e/
例：
input[type="data-autosize-input"] { width: 90px; min-width: 90px; max-width: 300px; transition: width 0.25s; }
如果你想要一个很好的效果，你只需使用css设置最小/最大宽度并在宽度上使用过渡。
您可以将结尾的空间/距离指定为输入元素上data-autosize-input属性的json表示法中的值。
当然你也可以使用jQuery初始化它
$("selector").autosizeInput();
目前的答案是复杂的。 这是一个快速的
$('#myinput').width($('#myinput').prop('scrollWidth'))
将上述内容添加到输入keydown / up / press事件是微不足道的。 测试铬
简单的东西：
$('#resizeme').keydown(function(){ // listen for keypresses var contents = $(this).val(); // get value var charlength = contents.length; // get number of chars newwidth = charlength*9; // rough guesstimate of width of char $(this).css({width:newwidth}); // apply new width });
您可以更改个人偏好/文字大小的乘数
示例： http ： //jsfiddle.net/bzBdX/6/
$(function(){ $("input").keyup(function(){ $(this).stop().animate({ width: $(this).val().length*7 },100) }) })
所以我做了一个例子，它试图通过在一个跨度中插入字母并计算宽度来计算宽度
(function() { var mDiv = $("").text("M").appendTo("body"), mSize = mDiv.width(); mDiv.detach(); var letterSize = function(s) { var sDiv = $("").text("M" + s + "M").appendTo("body"), sSize = sDiv.width(); sDiv.detach(); return (sSize - (mSize * 2)) * 0.89; }; $("input[data-resise-me]").each(function() { var minSize = $(this).width(); var resizeInput = function() { var calcSize = $.map($(this).val(), letterSize); var inputSize = 0; $.each(calcSize, function(i, v) { inputSize += v; }); $(this).width( inputSize < minSize ? minSize : inputSize ); }; $(this).on({ keydown: resizeInput, keyup: resizeInput }); }); } ());
这可能是一个更好的方法。
如@ManseUK所述。 这条线对我有用。 JQuery 1.8版
$（ ‘＃resizeme’）的CSS（{宽度：newwidth}）;
所有基于字符数的解决方案都非常弱，因为如果它不是单色字体，则每个字符可以具有不同的宽度。 我正在解决这个问题，创建一个包含文本输入值的div，它具有相同的字体属性并将其宽度作为必需的值。
像这样的东西：
function resizeInput() { $('body').append(''+$(this).val()+''); $(this).css('width', $('.new_width').width()); $('.new_width').remove() } $('input') // event handler .keyup(resizeInput) // resize on page load .each(resizeInput);
此示例已在Chrome 25和Firefox 19上测试过。（ http://jsfiddle.net/9ezyz/ ）
function input_update_size() { var value = $(this).val(); var size = 12; // Looking for font-size into the input if (this.currentStyle) size = this.currentStyle['font-size']; else if (window.getComputedStyle) size = document.defaultView.getComputedStyle(this,null).getPropertyValue('font-size'); $(this).stop().animate({width:(parseInt(size)/2+1)*value.length},500); //$(this).width((parseInt(size)/2+1)*value.length); } $('input') .each(input_update_size) .keyup(input_update_size);
你可以在js小提琴上查看这个演示… http://jsfiddle.net/ninadajnikar/bzBdX/9/ 。
您可以根据需要更新宽度值