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输入字段右边填充

问题描述投票：2回答：3

3个回答

最新问题

HTML输入字段右边填充

问题描述 投票：2回答：3

3个回答

最新问题

问题描述投票：2回答：3