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这样的细长值会占用较小的宽度，并且。
确保多余的跨度元素和目标输入框具有一些字体大小。
计划在以下情况下为文本框设置最小宽度它是空值或苗条值，例如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 个答案: