<input type="text" value="1" style=" font - family:宋体;/>
这是我的代码，它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?
我想要一个具有动态变化宽度的文本输入字段，以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充，这就是问题所在，第二个问题是最小宽度在输入上根本不起作用。
如果我设置的宽度超过了需要的宽度，那么整个程序就会很混乱，我需要1px的宽度，只在需要的时候才需要。
当前回答
这是我的两分钱。 创建一个空的不可见的div。用输入内容填充它，并返回输入字段的宽度。匹配每个框之间的文本样式。
$(".answers_number").keyup(function(){ $( "#number_box" ).html( $( this ).val() ); $( this ).animate({ width: $( "#number_box" ).width()+20 }, 300, function() { }); }); #number_box { position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap; padding:0 4px; /*Your font styles to match input*/ font-family:Arial; font-size: 30px; } .answers_number { font-size: 30px; font-family:Arial; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" class="answers_number" /> <div id="number_box"> </div>
其他回答
只是在其他答案的基础上加上。
我注意到现在在一些浏览器的输入字段有一个scrollWidth。这意味着:
this.style.width = this.scrollWidth + 'px';
应该工作得很好。在chrome, firefox和safari测试。
对于删除支持，您可以先添加'=0'，然后再重新调整。
this.style.width = 0; this.style.width = this.scrollWidth + 'px';
很简单:
oninput='this.style.width = (this.scrollWidth - N) + "px";'
其中N是某个数字(例子中的2，我正在开发的东西上的17)，这是由实验确定的。
减去N可以防止这个奇怪的多余空间在文本到达文本框的末尾之前很久就开始积累。
比较。请仔细注意在第一个字符之后大小是如何变化的。 < p >减去N: < / p > <input type="text" placeholder="enter lots of text here" oninput='this.style. "'> . width = (this.scrollWidth-2) + "px" <p>Not minus N:</p> <input type="text" placeholder="enter lots of text here" oninput='this.style. "width = (this.scrollWidth) + "px"
我只是花了些时间来弄清楚怎么做。 实际上，我发现的最简单的方法是将输入值移动到span之前的输入，保持输入1个符号宽度。虽然我不确定它是否适合你最初的需求。 也许它需要一些额外的代码，但在react+flux的应用程序中，这是非常自然的解决方案。
更好的是onvalue:
<input id="txt" type="text" onvalue="this.style.width = ((this.value.length + 1) * 8) + 'px';">
它还包括粘贴、拖放等。
这是一个普通的JS和jQuery插件，我写的，将处理调整输入元素使用画布和字体大小/家族，以确定实际的字符串长度时，渲染。(只适用于> IE9, chrome, safari, firefox, opera和大多数其他主要的浏览器，已经实现了画布元素)。
普通JS：
function autoSize(input, o) {
o || (o = {});
o.on || (o.on = 'keyup');
var canvas = document.createElement('canvas');
canvas.setAttribute('style', 'position: absolute; left: -9999px');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
input.addEventListener(o.on, function () {
ctx.font = getComputedStyle(this,null).getPropertyValue('font');
this.style.width = ctx.measureText(this.value + ' ').width + 'px';
});
}
//Usage
autoSize(document.getElementById('my-input'));
jQuery插件:
$.fn.autoSize = function(o) {
o = $.extend({}, {
on: 'keyup'
}, o);
var $canvas = $('<canvas/>').css({position: 'absolute', left: -9999});
$('body').append($canvas);
var ctx = $canvas[0].getContext('2d');
return this.on(o.on, function(){
var $this = $(this);
ctx.font = $this.css('font');
$this.width(ctx.measureText($this.val()).width + 'px');
})
}
//Usage:
$('#my-input').autoSize();
注意:这将不处理文本转换，行间距和字母间距，以及其他一些文本大小变化属性。要处理文本转换属性，请设置并调整文本值以匹配该属性。其他的可能相当直截了当。如果这开始获得一些吸引力，我会实施……
