如何动态设置文本输入样式

Question

我在4个字符的块中显示更大的字符串：

abcd 2345 3456 efgh

但我没有使用空格字符，而是使用span和margin-right。这样用户可以复制＆amp;粘贴数字而不需要额外的空格。

<span class="chunk">abcd</span>
<span class="chunk">2345</span>
...

.chunk {
    margin-right: 6px;
}

现在我想有一个文本输入字段，在用户输入数字或者在表单中粘贴数字时，以相同的方式对数字进行分组。

<input id="numberInput1" type="text"/>

目前实现此行为的最佳做法是什么？我正在寻找一个不太模糊的可靠解决方案，并且不会导致可怕的可访问性问题。

Answer 1

您可以使用contenteditable元素。据我所知，输入 - 没有白色空格 - 不具有风格。

然后，您可以解析粘贴到元素中的数字，并将它们重新渲染为样式标记。

非常花哨的东西，值得一玩。 =）

希望它有所帮助。