<input type="text" value="1" style=" font - family:宋体;/>
这是我的代码，它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?
我想要一个具有动态变化宽度的文本输入字段，以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充，这就是问题所在，第二个问题是最小宽度在输入上根本不起作用。
如果我设置的宽度超过了需要的宽度，那么整个程序就会很混乱，我需要1px的宽度，只在需要的时候才需要。
当前回答
你可以设置大小属性。 如果你正在使用一个响应式框架，下面的代码就足够了:
<input size="{{ yourValue.length }}" [value]="yourValue" />
但如果你使用纯js，你应该设置事件处理程序，像这样:
<input oninput="this.setAttribute('size', this.value.length)" />
其他回答
这个答案提供了在浏览器中检索文本宽度的最准确的方法之一，比公认的答案更准确。它使用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" />
只是在其他答案的基础上加上。
我注意到现在在一些浏览器的输入字段有一个scrollWidth。这意味着:
this.style.width = this.scrollWidth + 'px';
应该工作得很好。在chrome, firefox和safari测试。
对于删除支持，您可以先添加'=0'，然后再重新调整。
this.style.width = 0; this.style.width = this.scrollWidth + 'px';
您希望随着文本的更改而更改size属性。
# react
const resizeInput = (e) => {
e.target.setAttribute('size', e.target.value.length || 1);
}
<input
onChange={resizeInput}
size={(propertyInput.current && propertyInput.current.value.length) || 1}
ref={propertyInput}
/>
为了更好的外观和感觉
你应该使用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>
为什么不使用css呢?
<div id="wrapper">
<input onkeyup="keyup(event)">
<div id="ghost"></div>
</div>
函数keyup(e) { . getelementbyid(“鬼”)。innerText = e.target.value; ｝ #包装{ 位置:相对; min-width: 30 px; 显示:inline-block; ｝ 输入{ 位置:绝对的; 左:0; 右:0; 边框:1px纯蓝色; 宽度:100%; ｝ #鬼{ 颜色:透明; ｝ < div id = "包装" > <输入onkeyup = "按键弹起(事件)" > < div id = "鬼" > < / div > < / div >
wrapper {
position: relative;
min-width: 30px;
border: 1px solid red;
display: inline-block;
}
input {
position: absolute;
left:0;
right:0;
width: 100%;
}
#ghost {
color: transparent;
}
这段代码是由@Iain Todd介绍的，我认为我应该分享它
