<input type="text" value="1" style=" font - family:宋体;/>
这是我的代码，它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?
我想要一个具有动态变化宽度的文本输入字段，以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充，这就是问题所在，第二个问题是最小宽度在输入上根本不起作用。
如果我设置的宽度超过了需要的宽度，那么整个程序就会很混乱，我需要1px的宽度，只在需要的时候才需要。
当前回答
这是一个普通的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();
注意:这将不处理文本转换，行间距和字母间距，以及其他一些文本大小变化属性。要处理文本转换属性，请设置并调整文本值以匹配该属性。其他的可能相当直截了当。如果这开始获得一些吸引力，我会实施……
其他回答
基于Michael的回答，我使用jQuery创建了自己的版本。我认为这是大多数答案的一个更简洁的版本，它似乎可以完成工作。
我和这里的大多数人做的是一样的事情，使用span来写入输入文本，然后得到宽度。然后，当动作keyup和blur被调用时，我设置宽度。
这是一个工作的代码依赖。这个代码依赖显示了如何将其用于多个输入字段。
HTML结构:
<input type="text" class="plain-field" placeholder="Full Name">
<span style="display: none;"></span>
jQuery:
function resizeInputs($text) {
var text = $text.val().replace(/\s+/g, ' '),
placeholder = $text.attr('placeholder'),
span = $text.next('span');
span.text(placeholder);
var width = span.width();
if(text !== '') {
span.text(text);
var width = span.width();
}
$text.css('width', width + 5);
};
上面的函数获取输入值，修剪多余的空格，并将文本设置为span以获得宽度。如果没有文本，则获取占位符并将其输入到span中。一旦它将文本输入到span中，它就会设置输入的宽度。宽度上的+ 5是因为如果没有它，在Edge浏览器中输入会被切断一小部分。
$('.plain-field').each(function() {
var $text = $(this);
resizeInputs($text);
});
$('.plain-field').on('keyup blur', function() {
var $text = $(this);
resizeInputs($text);
});
$('.plain-field').on('blur', function() {
var $text = $(this).val().replace(/\s+/g, ' ');
$(this).val($text);
});
如果这可以改进，请让我知道，因为这是我能想出的最干净的解决方案。
下面是使用DIV和' contentteditable '属性来解决这个问题的另一种方法:
HTML:
<div contenteditable = "true" class = "fluidInput" data-placeholder = ""></div>
CSS:(给DIV一些维度，使它更容易看到)
.fluidInput {
display : inline-block;
vertical-align : top;
min-width : 1em;
height : 1.5em;
font-family : Arial, Helvetica, sans-serif;
font-size : 0.8em;
line-height : 1.5em;
padding : 0px 2px 0px 2px;
border : 1px solid #aaa;
cursor : text;
}
.fluidInput * {
display : inline;
}
.fluidInput br {
display : none;
}
.fluidInput:empty:before {
content : attr(data-placeholder);
color : #ccc;
}
注意:如果你计划在你计划提交的FORM元素中使用这个，你将需要使用Javascript / jQuery来捕获提交事件，这样你就可以解析DIV的“值”(分别是. innerhtml或.html())。
您还可以使用size属性设置输入的宽度。输入的大小决定了它的字符宽度。
输入可以通过监听关键事件动态地调整它的大小。
例如
$("input[type='text']").bind('keyup', function () {
$(this).attr("size", $(this).val().length );
});
关于这个课题JsFiddle
听起来好像您希望样式根据文本框的内容动态地应用于文本框的宽度。如果是这样的话，你将需要一些js来运行文本框内容的变化，就像这样:
<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">
注意:这个解决方案只适用于每个字符都是8px宽的情况。您可以使用CSS-Unit“ch”(字符)，它表示所选字体中字符“0”的宽度。你可以在这里阅读。
为了更好的外观和感觉
你应该使用jQuery keypress()事件结合String.fromCharCode(e.which)来获得按下的字符。因此你可以计算你的宽度。为什么?因为这样看起来会更性感:)
下面是一个jsfiddle，与使用keyup事件的解决方案相比，它产生了良好的行为:http://jsfiddle.net/G4FKW/3/
下面是一个普通的JS，它监听<input>元素的输入事件，并将span兄弟元素设置为具有相同的文本值，以便测量它。
document.querySelector('input').addEventListener('input', onInput) function onInput(){ var spanElm = this.nextElementSibling; spanElm.textContent = this.value; // the hidden span takes the value of the input; this.style.width = spanElm.offsetWidth + 'px'; // apply width of the span to the input }; /* it's important the input and its span have same styling */ input, .measure { padding: 5px; font-size: 2.3rem; font-family: Sans-serif; white-space: pre; /* white-spaces will work effectively */ } .measure{ position: absolute; left: -9999px; top: -9999px; } <input type="text" /> <span class='measure'></span>
