<input type="text" value="1" style=" font - family:宋体;/>
这是我的代码,它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?
我想要一个具有动态变化宽度的文本输入字段,以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充,这就是问题所在,第二个问题是最小宽度在输入上根本不起作用。
如果我设置的宽度超过了需要的宽度,那么整个程序就会很混乱,我需要1px的宽度,只在需要的时候才需要。
<input type="text" value="1" style=" font - family:宋体;/>
这是我的代码,它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?
我想要一个具有动态变化宽度的文本输入字段,以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充,这就是问题所在,第二个问题是最小宽度在输入上根本不起作用。
如果我设置的宽度超过了需要的宽度,那么整个程序就会很混乱,我需要1px的宽度,只在需要的时候才需要。
当前回答
更新答案https://stackoverflow.com/a/41389961/1022684
如果你有多个输入并且不想重复输入文本:
$(() => {
$('.container input').on('input', (e) => {
$(e.target).prev().text($(e.target).val())
})
$('.container input').each((idx, elem) => {
$(elem).prev().text($(elem).val())
})
})
其他回答
下面是一个简单的函数来获取所需的内容:
function resizeInput() {
const input = document.getElementById('myInput');
input.style.width = `${input.scrollWidth}px`;
};
值得注意的是,当字体是等宽的时候,可以进行漂亮的大小调整,所以我们可以使用ch单位完美地调整输入元素的大小。
同样,在这种方法中,我们可以通过在输入事件上更新CSS变量(自定义属性)来更新字段的宽度,我们还应该照顾已经在DOMContentLoaded事件上预先填充的输入
Codepen演示
标记
<input type="text" value="space mono font" class="selfadapt" />
CSS
:root { --size: 0; }
.selfadapt {
padding: 5px;
min-width: 10ch;
font-family: "space mono";
font-size: 1.5rem;
width: calc(var(--size) * 1ch);
}
作为根变量,我们设置——size: 0:这个变量将包含输入的长度,它将在calc()表达式中乘以1ch。默认情况下,我们也可以设置最小宽度,例如10ch
Javascript部分读取插入值的长度并更新变量——size:
JS
let input = document.querySelector('.selfadapt');
let root = document.documentElement.style;
/* on input event auto resize the field */
input.addEventListener('input', function() {
root.setProperty('--size', this.value.length );
});
/* resize the field if it is pre-populated */
document.addEventListener("DOMContentLoaded", function() {
root.setProperty('--size', input.value.length);
});
当然,即使你不使用等宽字体,这仍然有效,但在这种情况下,你将需要通过将——size变量乘以另一个不同于1ch的值(它严格依赖于font-family和font-size)来改变calc()公式。
在现代浏览器版本中,CSS单元ch也是可用的。根据我的理解,它是一个与字体无关的单位,其中1ch等于任何给定字体中字符0(零)的宽度。
因此,通过绑定到输入事件,像下面这样简单的东西可以用作resize函数:
var input = document.querySelector('input');//获取输入元素 输入。addEventListener(“输入”,resizeInput);//在"input"事件上绑定"resizeInput"回调 resizeInput.call(输入);//立即调用函数 函数resizeInput() { This.style.width = this.value.length + "ch"; } 输入{字体大小:1.3 em;填充:.5em;} < >标签文本 <输入> < / >标签
该示例将输入大小调整为值的长度+ 2个字符。
单位ch的一个潜在问题是,在许多字体(如Helvetica)中,字符“m”的宽度超过字符0的宽度,而字符“i”要窄得多。1ch通常比字符平均宽度宽,根据这篇文章,通常是20-30%左右。
为了更好的外观和感觉
你应该使用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>
这是一个不需要等宽字体的解决方案,只需要非常小的javascript代码,不需要计算计算样式,甚至支持IME,支持RTL文本。
// copy the text from input to the span $(function () { $('.input').on('input', function () { $('.text').text($('.input').val()); }); }); * { box-sizing: border-box; } .container { display: inline-block; position: relative; } .input, .text { margin: 0; padding: 2px 10px; font-size: 24px; line-height: 32px; border: 1px solid #ccc; box-radius: 3px; height: 36px; font: 20px/20px sans-serif; /* font: they should use same font; */ } .text { padding-right: 20px; display: inline-block; visibility: hidden; white-space: pre; } .input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; } <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script> <div class="container"> <span class="text"> some text </span> <input class="input" value="some text" /> </div>
利用张成的空间。文本来适应文本的宽度,并让输入有相同的大小与它的位置:绝对容器。每次变化时,将输入的值复制到span中(您可以轻松地将这段代码更改为普通JS,或者使用前端框架提供的特性)。因此,输入将适合其内容的大小。