有没有办法将<input type="text"> 的宽度缩放到实际值的宽度？
input {
display: block;
margin: 20px;
width: auto;
}<input type="text" value="I've had enough of these damn snakes, on this damn plane!" />
<input type="text" value="me too" />【问题讨论】：
输入元素的行为确实与其他元素不同，如果你给它们float: left（见http://jsfiddle.net/hEvYj/5/），它们就会做你想要的。如果不使用 JavaScript 以某种方式计算它，我认为这是不可能的（即在框中每个字母的宽度上添加 5px）。
【讨论】：
您可以通过将size 属性设置为输入内容的长度来轻松做到这一点：
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
$('input[type="text"]')
// event handler
.keyup(resizeInput)
// resize on page load
.each(resizeInput);
见：http://jsfiddle.net/nrabinowitz/NvynC/
这似乎在右侧添加了一些我怀疑与浏览器相关的填充。如果您希望它与输入非常紧密，您可以使用the one I describe in this related answer 之类的技术，使用 jQuery 来计算文本的像素大小。
【讨论】：
Courier New 字体，因为该字体中所有字符的宽度是相等的。 (jsfiddle.net/NabiKAZ/NvynC/745)
如果由于某种原因其他解决方案不适合您，您可以使用 contenteditable-span 而不是输入元素。
<span contenteditable="true">dummy text</span>
请注意，这更像是一种 hack，并且具有允许完全未经处理的 HTML 输入的严重缺点，例如让用户输入（和粘贴）换行符、链接和其他 HTML。
所以您可能不应该使用此解决方案，除非您非常仔细地清理输入...
更新：您可能想使用 DreamTeK 的 solution below。
【讨论】：
contenteditable 用于设置富文本所见即所得的文本编辑器。不是为了调整输入大小。
我在 GitHub 上有一个 jQuery 插件：https://github.com/MartinF/jQuery.Autosize.Input
它镜像输入的值，计算宽度并将其用于设置输入的宽度。
你可以在这里看到一个活生生的例子：http://jsfiddle.net/mJMpw/2175/
如何使用它的示例（因为发布jsfiddle链接时需要一些代码）：
<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 设置最小/最大宽度并在宽度上使用过渡。
您可以将间距/距离指定为输入元素上 data-autosize-input 属性的 json 表示法中的值。
当然你也可以使用 jQuery 来初始化它
$("selector").autosizeInput();
【讨论】：
用户nrabinowitz' solution 运行良好，但我使用keypress 事件而不是keyup。如果用户输入缓慢，这会减少延迟。
【讨论】：
oninput（或onpropertychange用于旧版IE）是正确的事件，因为它们会响应诸如右键单击粘贴或从浏览器菜单栏中选择“文件->粘贴”之类的操作
这是我对nrabinowitz' solution 的修改。我没有使用 size 属性，因为正如@Mark 指出的那样，它与比例字体并不完美。我的解决方案在您的输入之后放置一个元素，并由浏览器计算宽度（使用 jQuery）。
虽然我没有测试它，但我想它只有在所有影响字体的 CSS 属性都被继承时才会起作用。
focusout 事件的输入宽度会发生变化，这对我来说效果更好。但是您也可以在键入时使用 keyup/keypress 来更改输入的宽度。
function resizeInput() {
//Firstly take the content or placeholder if content is missing.
var content =
$(this).val().length > 0 ? $(this).val() : $(this).prop("placeholder");
//Create testing element with same content as input.
var widthTester = $("<span>"+content+"</span>").hide();
//Place testing element into DOM after input (so it inherits same formatting as input does).
widthTester.insertAfter($(this));
//Set inputs width; you may want to use outerWidth() or innerWidth()
//depending whether you want to count padding and border or not.
$(this).css("width",widthTester.width()+"px");
//Remove the element from the DOM
widthTester.remove();
}
$('.resizing-input').focusout(resizeInput).each(resizeInput);
【讨论】：
这里已经有很多好的答案了。为了好玩，我根据其他答案和我自己的想法在下面实现了这个解决方案。
<input class="adjust">
输入元素已调整为像素精度，并且可以定义额外的偏移量。
function adjust(elements, offset, min, max) {
// Initialize parameters
offset = offset || 0;
min = min || 0;
max = max || Infinity;
elements.each(function() {
var element = $(this);
// Add element to measure pixel length of text
var id = btoa(Math.floor(Math.random() * Math.pow(2, 64)));
var tag = $('<span id="' + id + '">' + element.val() + '</span>').css({
'display': 'none',
'font-family': element.css('font-family'),
'font-size': element.css('font-size'),
}).appendTo('body');
// Adjust element width on keydown
function update() {
// Give browser time to add current letter
setTimeout(function() {
// Prevent whitespace from being collapsed
tag.html(element.val().replace(/ /g, ' '));
// Clamp length and prevent text from scrolling
var size = Math.max(min, Math.min(max, tag.width() + offset));
if (size < max)
element.scrollLeft(0);
// Apply width to element
element.width(size);
}, 0);
};
update();
element.keydown(update);
});
}
// Apply to our element
adjust($('.adjust'), 10, 100, 500);
使用 CSS 过渡使调整变得平滑。
.adjust {
transition: width .15s;
}
这里是the fiddle。我希望这可以帮助其他人寻找干净的解决方案。
【讨论】：
你可以在这里解决这个问题:) http://jsfiddle.net/MqM76/217/
HTML：
<input id="inpt" type="text" />
<div id="inpt-width"></div>
JS：
$.fn.textWidth = function(text, font) {
if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
$.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
return $.fn.textWidth.fakeEl.width();
};
$('#inpt').on('input', function() {
var padding = 10; //Works as a minimum width
var valWidth = ($(this).textWidth() + padding) + 'px';
$('#'+this.id+'-width').html(valWidth);
$('#inpt').css('width', valWidth);
}).trigger('input');
【讨论】：
我的 jQuery 插件适合我：
用法：
$('form input[type="text"]').autoFit({
});
jquery.auto-fit.js的源码：
;
(function ($) {
var methods = {
init: function (options) {
var settings = $.extend(true, {}, $.fn.autoFit.defaults, options);
var $this = $(this);
$this.keydown(methods.fit);
methods.fit.call(this, null);
return $this;
},
fit: function (event) {
var $this = $(this);
var val = $this.val().replace(' ', '-');
var fontSize = $this.css('font-size');
var padding = $this.outerWidth() - $this.width();
var contentWidth = $('<span style="font-size: ' + fontSize + '; padding: 0 ' + padding / 2 + 'px; display: inline-block; position: absolute; visibility: hidden;">' + val + '</span>').insertAfter($this).outerWidth();
$this.width((contentWidth + padding) + 'px');
return $this;
}
};
$.fn.autoFit = function (options) {
if (typeof options == 'string' && methods[options] && typeof methods[options] === 'function') {
return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof options === 'object' || !options) {
// Default to 'init'
return this.each(function (i, element) {
methods.init.apply(this, [options]);
});
} else {
$.error('Method ' + options + ' does not exist on jquery.auto-fit.');
return null;
}
};
$.fn.autoFit.defaults = {};
})(this['jQuery']);
【讨论】：
编辑：该插件现在可以使用尾随空格字符。感谢您指出@JavaSpyder
由于大多数其他答案与我需要的不符（或者根本不起作用） 我将 Adrian B 的答案修改为一个合适的 jQuery 插件，它可以实现输入的像素完美缩放，而无需您更改 css 或 html。
例如：https://jsfiddle.net/587aapc2/
用法：$("input").autoresize({padding: 20, minWidth: 20, maxWidth: 300});
插件：
//JQuery plugin:
$.fn.textWidth = function(_text, _font){//get width of text with font. usage: $("div").textWidth();
var fakeEl = $('<span>').hide().appendTo(document.body).text(_text || this.val() || this.text()).css({font: _font || this.css('font'), whiteSpace: "pre"}),
width = fakeEl.width();
fakeEl.remove();
return width;
};
$.fn.autoresize = function(options){//resizes elements based on content size. usage: $('input').autoresize({padding:10,minWidth:0,maxWidth:100});
options = $.extend({padding:10,minWidth:0,maxWidth:10000}, options||{});
$(this).on('input', function() {
$(this).css('width', Math.min(options.maxWidth,Math.max(options.minWidth,$(this).textWidth() + options.padding)));
}).trigger('input');
return this;
}
//have <input> resize automatically
$("input").autoresize({padding:20,minWidth:40,maxWidth:300});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="i magically resize">
<br/><br/>
called with:
$("input").autoresize({padding: 20, minWidth: 40, maxWidth: 300});【讨论】：
font 是 CSS 简写（奇怪的是 FF can't handle it）。您可以通过在第一个函数中定义来解决此问题：var _this_font = [this.css('font-style'), this.css('font-variant'), this.css('font-weight'), 'normal', this.css('font-size') + ' / ' + this.css('line-height'), this.css('font-family')].join(' ');。然后将this.css('font') 更改为_this_font。
我已经看到了几种方法来做到这一点，但计算字体宽度并不总是 100% 准确，这只是一个估计值。
我设法创建了一种像素完美的方法来调整输入宽度，方法是使用隐藏的占位符进行测量。
jQuery （推荐）
$(function() {
$('#hide').text($('#txt').val());
$('#txt').width($('#hide').width());
}).on('input', function() {
$('#hide').text($('#txt').val());
$('#txt').width($('#hide').width());
});body,
#txt,
#hide {
font: inherit;
margin: 0;
padding: 0;
}
#txt {
border: none;
color: #888;
min-width: 10px;
}
#txt:focus-visible {
outline: none;
}
#hide {
display: none;
white-space: pre;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum
<span id="hide"></span><input id="txt" type="text" value="type here ..."> egestas arcu.
</p>纯 JavaScript
我无法确定 jQuery 如何计算隐藏元素的宽度，因此需要对 css 稍作调整以适应此解决方案。
const hide = document.getElementById('hide');
const txt = document.getElementById('txt');
resize();
txt.addEventListener("input", resize);
function resize() {
hide.textContent = txt.value;
txt.style.width = hide.offsetWidth + "px";
}body,
#txt,
#hide {
font: inherit;
margin: 0;
padding: 0;
}
#txt {
border: none;
color: #888;
min-width: 10px;
}
#txt:focus-visible {
outline: none;
}
#hide {
position: absolute;
height: 0;
overflow: hidden;
white-space: pre;
}<p>Lorem ipsum
<span id="hide"></span><input id="txt" type="text" value="type here ..."> egestas arcu.
</p>【讨论】：
hide 必须具有相同的填充）height: 0; 部分将无法正常工作。解决此问题的方法是使用position: fixed; top: -100vh;，您也可以添加opacity: 0;，以确保安全。
不幸的是，size 属性不能很好地工作。有时会有额外的空间和太少的空间，这取决于字体的设置方式。 （查看示例）
如果您希望它正常工作，请尝试观察输入的变化，然后调整它的大小。您可能希望将其设置为输入的scrollWidth。我们还需要考虑盒子的大小。
在下面的示例中，我将输入的 size 设置为 1，以防止它的 scrollWidth 大于我们的初始宽度（使用 CSS 手动设置）。
// (no-jquery document.ready)
function onReady(f) {
"complete" === document.readyState
? f() : setTimeout(onReady, 10, f);
}
onReady(function() {
[].forEach.call(
document.querySelectorAll("input[type='text'].autoresize"),
registerInput
);
});
function registerInput(el) {
el.size = 1;
var style = el.currentStyle || window.getComputedStyle(el),
borderBox = style.boxSizing === "border-box",
boxSizing = borderBox
? parseInt(style.borderRightWidth, 10) +
parseInt(style.borderLeftWidth, 10)
: 0;
if ("onpropertychange" in el) {
// IE
el.onpropertychange = adjust;
} else if ("oninput" in el) {
el.oninput = adjust;
}
adjust();
function adjust() {
// reset to smaller size (for if text deleted)
el.style.width = "";
// getting the scrollWidth should trigger a reflow
// and give you what the width would be in px if
// original style, less any box-sizing
var newWidth = el.scrollWidth + boxSizing;
// so let's set this to the new width!
el.style.width = newWidth + "px";
}
}* {
font-family: sans-serif;
}
input.autoresize {
width: 125px;
min-width: 125px;
max-width: 400px;
}
input[type='text'] {
box-sizing: border-box;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid #ccc;
margin-bottom: 10px;
}<label>
Resizes:
<input class="autoresize" placeholder="this will resize" type='text'>
</label>
<br/>
<label>
Doesn't resize:
<input placeholder="this will not" type='text'>
</label>
<br/>
<label>
Has extra space to right:
<input value="123456789" size="9" type="text"/>
</label>我认为这甚至应该在 IE6 中工作，但不要相信我的话。
根据您的用例，您可能需要将调整函数绑定到其他事件。例如。以编程方式更改输入值，或将元素样式的display 属性从none（其中scrollWidth === 0）更改为block 或inline-block，等等。
【讨论】：
与其尝试创建一个div并测量它的宽度，我认为直接使用更准确的canvas元素测量宽度更可靠。
function measureTextWidth(txt, font) {
var element = document.createElement('canvas');
var context = element.getContext("2d");
context.font = font;
return context.measureText(txt).width;
}
现在您可以使用它来测量某个输入元素在任何时间点的宽度：
// assuming inputElement is a reference to an input element (DOM, not jQuery)
var style = window.getComputedStyle(inputElement, null);
var text = inputElement.value || inputElement.placeholder;
var width = measureTextWidth(text, style.font);
这会返回一个数字（可能是浮点数）。如果你想考虑填充，你可以试试这个：
var desiredWidth = (parseInt(style.borderLeftWidth) +
parseInt(style.paddingLeft) +
Math.ceil(width) +
1 + // extra space for cursor
parseInt(style.paddingRight) +
parseInt(style.borderRightWidth))
inputElement.style.width = desiredWidth + "px";
【讨论】：
使用画布我们可以计算元素的宽度：
function getTextWidth(text, fontSize, fontName) {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
context.font = fontSize + fontName;
return context.measureText(text).width;
}
并在所选事件上使用它：
function onChange(e) {
let width = getTextWidth(this.value, $(this).css('font-size'),
$(this).css('font-family'));
$(this.input).css('width', width);
}
【讨论】：
试试canvas measureText解决方案
css:
input{
min-width:10px!important;
max-width:99.99%!important;
transition: width 0.1s;
border-width:1px;
}
javascript：
function getWidthOfInput(input){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var text = input.value.length ? input.value : input.placeholder;
var style = window.getComputedStyle(input);
ctx.lineWidth = 1;
ctx.font = style.font;
var text_width = ctx.measureText(text).width;
return text_width;
}
function resizable (el, factor) {
function resize() {
var width = getWidthOfInput(el);
el.style.width = width + 'px';
}
var e = 'keyup,keypress,focus,blur,change'.split(',');
for (var i in e){
el.addEventListener(e[i],resize,false);
}
resize();
}
$( "input" ).each( function(i){
resizable(this);
});
【讨论】：
我找到了另一个不涉及 JS 的问题的解决方案。在 HTML 中，我只写了如下内容：
<div>
<input class="input" value={someValue} />
<div class="ghost-input">someValue</div>
</div>
只需要设置可见性：在 ghost-input 上隐藏，在输入本身上设置 width: 100%。它之所以有效，是因为输入缩放到其容器的 100%，其宽度由浏览器本身计算（基于相同的文本）。
如果您向输入字段添加一些填充和边框，您必须相应地调整您的 ghost-input 类（或在输入类中使用 calc()）。
【讨论】：
display 规则？使用inline-block，输入会扩展以适合其值，但不会缩小到小于浏览器默认输入宽度。
display: inline-block 放在输入标签内的外部div 和size="1" 上，它会缩小默认宽度，至少在铬。它并不完美，尤其是如果您不删除默认填充，但它对我来说已经足够接近了，并且比这里的任何其他答案都容易一百万倍！！！ .my-input {width: 100%;} .ghost-input {visibility: hidden;} .outer-div {display: inline-block;} <input class="my-input" value="small string" size="1" /> <div class="ghost-input">small string</div>
我解决了创建画布的宽度并计算它的大小。重要的是输入值和画布共享相同的字体特征（系列、大小、重量......）
import calculateTextWidth from "calculate-text-width";
/*
requires two props "value" and "font"
- defaultFont: normal 500 14px sans-serif
*/
const defaultText = 'calculate my width'
const textFont = 'normal 500 14px sans-serif'
const calculatedWidth = calculateTextWidth(defaultText, textFont)
console.log(calculatedWidth) // 114.37890625
GitHub：https://github.com/ozluy/calculate-text-width 代码沙盒：https://codesandbox.io/s/calculate-text-width-okr46
【讨论】：
您可以在此函数中传递任何input 元素以获取元素的正确宽度。这个宽度就像input 元素是一个具有原始元素所有属性的span 元素一样。它将考虑font-family、font-size 和所有其他可能影响文本总宽度的字体属性以及input 元素的水平边框和填充。此外，如果input 元素中没有任何值，它将返回占位符的宽度。
所以，这个宽度值将适合设置input 元素的宽度。在这种情况下，您可能还需要为元素设置最小宽度，以防它既没有值也没有占位符。
此外，此函数的行为与 offsetWidth 属性有些相似，只是此函数会将 px 附加到宽度值的末尾，即使 input 元素通过设置其隐藏display 到 none，不会将值四舍五入为整数，并且不会考虑垂直滚动条的宽度（如果有）。
function getInputWidth(element) {
const text = element.value || element.placeholder;
const elementStyle = window.getComputedStyle(element);
const fontProperty = elementStyle.font;
const horizontalBorder = parseFloat(elementStyle.borderLeftWidth) + parseFloat(elementStyle.borderRightWidth);
const horizontalPadding = parseFloat(elementStyle.paddingLeft) + parseFloat(elementStyle.paddingRight);
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.font = fontProperty;
const textWidth = context.measureText(text).width;
const totalWidth = horizontalBorder + horizontalPadding + textWidth + "px";
return totalWidth;
}
【讨论】：