<input type="text" value="1" style=" font - family:宋体;/>
这是我的代码，它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?
我想要一个具有动态变化宽度的文本输入字段，以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充，这就是问题所在，第二个问题是最小宽度在输入上根本不起作用。
如果我设置的宽度超过了需要的宽度，那么整个程序就会很混乱，我需要1px的宽度，只在需要的时候才需要。
当前回答
以下是对Lyth的回答的修改，考虑到了以下因素:
删除 初始化 占位符
它还允许任意数量的输入字段!要查看它的实际操作:http://jsfiddle.net/4Qsa8/
脚本:
$(document).ready(function () {
var $inputs = $('.resizing-input');
// Resize based on text if text.length > 0
// Otherwise resize based on the placeholder
function resizeForText(text) {
var $this = $(this);
if (!text.trim()) {
text = $this.attr('placeholder').trim();
}
var $span = $this.parent().find('span');
$span.text(text);
var $inputSize = $span.width();
$this.css("width", $inputSize);
}
$inputs.find('input').keypress(function (e) {
if (e.which && e.charCode) {
var c = String.fromCharCode(e.keyCode | e.charCode);
var $this = $(this);
resizeForText.call($this, $this.val() + c);
}
});
// Backspace event only fires for keyup
$inputs.find('input').keyup(function (e) {
if (e.keyCode === 8 || e.keyCode === 46) {
resizeForText.call($(this), $(this).val());
}
});
$inputs.find('input').each(function () {
var $this = $(this);
resizeForText.call($this, $this.val())
});
});
风格:
.resizing-input input, .resizing-input span {
font-size: 12px;
font-family: Sans-serif;
white-space: pre;
padding: 5px;
}
HTML:
<div class="resizing-input">
<input type="text" placeholder="placeholder"/>
<span style="display:none"></span>
</div>
$(document).ready(function() { var $inputs = $('.resizing-input'); // Resize based on text if text.length > 0 // Otherwise resize based on the placeholder function resizeForText(text) { var $this = $(this); if (!text.trim()) { text = $this.attr('placeholder').trim(); } var $span = $this.parent().find('span'); $span.text(text); var $inputSize = $span.width(); $this.css("width", $inputSize); } $inputs.find('input').keypress(function(e) { if (e.which && e.charCode) { var c = String.fromCharCode(e.keyCode | e.charCode); var $this = $(this); resizeForText.call($this, $this.val() + c); } }); // Backspace event only fires for keyup $inputs.find('input').keyup(function(e) { if (e.keyCode === 8 || e.keyCode === 46) { resizeForText.call($(this), $(this).val()); } }); $inputs.find('input').each(function() { var $this = $(this); resizeForText.call($this, $this.val()) }); }); .resizing-input input, .resizing-input span { font-size: 12px; font-family: Sans-serif; white-space: pre; padding: 5px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="resizing-input"> First: <input type="text" placeholder="placeholder" /> <span style="display:none"></span> </div> <br>
其他回答
这个答案提供了在浏览器中检索文本宽度的最准确的方法之一，比公认的答案更准确。它使用canvas html5元素，不像其他答案，不将元素添加到DOM，从而避免了过多添加元素到DOM引起的任何回流问题。
阅读更多关于Canvas元素与文本宽度的关系。
注意:根据MDN, getPropertyValue()方法的简写版本(如font)可能不可靠。我建议单独获取值以提高兼容性。我只是为了提高速度才用的。
/** * returns the width of child text of any DOM node as a float */ function getTextWidth(el) { // uses a cached canvas if available var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas")); var context = canvas.getContext("2d"); // get the full font style property var font = window.getComputedStyle(el, null).getPropertyValue('font'); var text = el.value; // set the font attr for the canvas text context.font = font; var textMeasurement = context.measureText(text); return textMeasurement.width; } var input = document.getElementById('myInput'); // listen for any input on the input field input.addEventListener('input', function(e) { var width = Math.floor(getTextWidth(e.target)); // add 10 px to pad the input. var widthInPx = (width + 10) + "px"; e.target.style.width = widthInPx; }, false); #myInput { font: normal normal 400 normal 18px / normal Roboto, sans-serif; min-width: 40px; } <input id="myInput" />
一个无懈可击的通用方法是:
考虑所有可能的测量输入元素的样式 能够在任何输入上应用测量，而无需修改HTML或
Codepen演示
var getInputValueWidth = (function(){ // https://stackoverflow.com/a/49982135/104380 function copyNodeStyle(sourceNode, targetNode) { var computedStyle = window.getComputedStyle(sourceNode); Array.from(computedStyle).forEach(key => targetNode.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key))) } function createInputMeassureElm( inputelm ){ // create a dummy input element for measurements var meassureElm = document.createElement('span'); // copy the read input's styles to the dummy input copyNodeStyle(inputelm, meassureElm); // set hard-coded styles needed for propper meassuring meassureElm.style.width = 'auto'; meassureElm.style.position = 'absolute'; meassureElm.style.left = '-9999px'; meassureElm.style.top = '-9999px'; meassureElm.style.whiteSpace = 'pre'; meassureElm.textContent = inputelm.value || ''; // add the meassure element to the body document.body.appendChild(meassureElm); return meassureElm; } return function(){ return createInputMeassureElm(this).offsetWidth; } })(); // delegated event binding document.body.addEventListener('input', onInputDelegate) function onInputDelegate(e){ if( e.target.classList.contains('autoSize') ) e.target.style.width = getInputValueWidth.call(e.target) + 'px'; } input{ font-size:1.3em; padding:5px; margin-bottom: 1em; } input.type2{ font-size: 2.5em; letter-spacing: 4px; font-style: italic; } <input class='autoSize' value="type something"> <br> <input class='autoSize type2' value="here too">
这是我的React解决方案，它适用于任何字体大小，只要确保你有一个monospace字体(所有字体字符宽度在monospace字体上是相同的)，就像我在我的解决方案，它将完美地工作。
JS:
const [value, setValue] = useState(0)
HTML:
<input value={value} onChange={(e) => {setValue(e.target.value)}} style={{width: `${value.toString().length}`ch}}/>
CSS:
@import url("https://fonts.googleapis.com/css2?family=B612+Mono&display=swap");
input{
font-family: "B612 Mono", monospace;
}
如果你使用Bootstrap，它可以很容易地完成:
<div contenteditable="true" class="form-control" style="display: inline"></div>
您只需要获取div的内容，并在提交表单之前将其放入隐藏输入中。
以下是对Lyth的回答的修改，考虑到了以下因素:
删除 初始化 占位符
它还允许任意数量的输入字段!要查看它的实际操作:http://jsfiddle.net/4Qsa8/
脚本:
$(document).ready(function () {
var $inputs = $('.resizing-input');
// Resize based on text if text.length > 0
// Otherwise resize based on the placeholder
function resizeForText(text) {
var $this = $(this);
if (!text.trim()) {
text = $this.attr('placeholder').trim();
}
var $span = $this.parent().find('span');
$span.text(text);
var $inputSize = $span.width();
$this.css("width", $inputSize);
}
$inputs.find('input').keypress(function (e) {
if (e.which && e.charCode) {
var c = String.fromCharCode(e.keyCode | e.charCode);
var $this = $(this);
resizeForText.call($this, $this.val() + c);
}
});
// Backspace event only fires for keyup
$inputs.find('input').keyup(function (e) {
if (e.keyCode === 8 || e.keyCode === 46) {
resizeForText.call($(this), $(this).val());
}
});
$inputs.find('input').each(function () {
var $this = $(this);
resizeForText.call($this, $this.val())
});
});
风格:
.resizing-input input, .resizing-input span {
font-size: 12px;
font-family: Sans-serif;
white-space: pre;
padding: 5px;
}
HTML:
<div class="resizing-input">
<input type="text" placeholder="placeholder"/>
<span style="display:none"></span>
</div>
$(document).ready(function() { var $inputs = $('.resizing-input'); // Resize based on text if text.length > 0 // Otherwise resize based on the placeholder function resizeForText(text) { var $this = $(this); if (!text.trim()) { text = $this.attr('placeholder').trim(); } var $span = $this.parent().find('span'); $span.text(text); var $inputSize = $span.width(); $this.css("width", $inputSize); } $inputs.find('input').keypress(function(e) { if (e.which && e.charCode) { var c = String.fromCharCode(e.keyCode | e.charCode); var $this = $(this); resizeForText.call($this, $this.val() + c); } }); // Backspace event only fires for keyup $inputs.find('input').keyup(function(e) { if (e.keyCode === 8 || e.keyCode === 46) { resizeForText.call($(this), $(this).val()); } }); $inputs.find('input').each(function() { var $this = $(this); resizeForText.call($this, $this.val()) }); }); .resizing-input input, .resizing-input span { font-size: 12px; font-family: Sans-serif; white-space: pre; padding: 5px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="resizing-input"> First: <input type="text" placeholder="placeholder" /> <span style="display:none"></span> </div> <br>
