HTML 输入字段右填充

Question

我有一个输入框，我想紧贴其中的值字符串。 因此，我在每个输入事件上调整了输入字段的大小，例如：

 <input value=1 size=1 oninput='this.size=this.value.length'>

这适用于 Chrome 和 Firefox（分别如下所示）在输入字段的右侧留下额外填充的例外。 Firefox 是最糟糕的。

我怎样才能通过 CSS 或内联属性摆脱右侧的额外填充，同时保持自动扩展扩展功能（相对于this.size = this.value.length ）？

更新：虽然下面的建议是假修复问题，但没有一个是正确的修复。 看来，在这方面， <input>框是不可赎回的。 因此，我只是继续使用<div contenteditable=true></div> 。 大纲紧紧地拥抱 textContent。 幸运的是，对于我的使用，与<form>或自动完成功能的兼容性不是必需的。

Answer 1

它不是在右侧填充。 您在输入中的文本只是向左对齐。 如果你想把它放在你输入的中心，你可以使用text-align: center; .

 input { text-align: center; }

 <input value=1 size=1 oninput='this.size=this.value.length'>

Answer 2

尝试这个。 输入3个字符后它工作正常。

HTML：

<input style="text-align:center" type="text" value="1" size="1">

JS：

function resize(e){
    len = e.target.value.length;
    if(len > 3){
        e.target.size = len-3;
    }
    else {
        e.target.size = len;
    }
}

document.querySelector("input").addEventListener("input",resize)

Answer 3

玩宽度，输出似乎非常接近您的预期。 请参阅下面的片段。 答案不是 100% 准确，而是接近。 请根据您的要求调整代码。

笔记：

你需要一个额外的 span 元素来获得准确的宽度而不需要额外的填充——这是因为，当分配一个固定的宽度来计算输入框的宽度时，像 1 这样的细长值占用的宽度更少，并且。
确保额外的 span 元素和目标输入框有一些字体大小。
当文本框为空或像 1 这样的细长值时，计划为其设置最小宽度。

希望这可以帮助。

<html>
<style>* {
font-family: calibri;
font-size: 11px;
}</style>
<body>
<span id="d1"></span>
<input type=text value="1" style="width: 12px;" size="1" onkeyup="d1.innerText=this.value;this.style.width = d1.offsetWidth;" id="t" />
</body>
</html>

HTML 输入字段右填充

问题描述

3 个解决方案

解决方案1
2 2019-03-19 11:29:17

解决方案2
0 2019-03-19 11:40:38

解决方案3
0 2019-03-19 17:14:55

HTML 输入字段右填充

问题描述

3 个解决方案

解决方案1 2 2019-03-19 11:29:17

解决方案2 0 2019-03-19 11:40:38

解决方案3 0 2019-03-19 17:14:55

解决方案1
2 2019-03-19 11:29:17

解决方案2
0 2019-03-19 11:40:38

解决方案3
0 2019-03-19 17:14:55