Question

我有一个脚本，当用户按下按钮时会生成文本。 此文字会发送到输入框，因此当我按下按钮时，一个输入框中会出现一些文字。

我想知道是否有任何CSS属性来设置显示在输入框中除以数字的所有“ - ”字符的颜色。

生成的txt示例：“4 - 6 - 9 - 8 - 2”

换句话说，我希望数字为红色，“ - ”为蓝色。

我很想知道如何做到这一点。我将非常感激。

Answer 1

input:text元素中不能包含多个样式的文本。如果您想要格式化文本，则需要使用div和contenteditable来使用自定义文本元素。

Answer 2

如果没有在要设置样式的部分周围包含某种元素，则无法设置字符串文本的样式，例如<span>。然后，您将使用CSS来设置<span>。

的样式

您需要使用JavaScript来操纵它。此外，您不能为<input>的不同部分设置不同的样式，您需要将值作为自己的元素复制到DOM中。

Answer 3

使用<div contenteditable="true"></div>代替文字输入。制作代表短划线的图像。在keyup事件中，用您的图像替换所有破折号。在表单提交时，复制div文本，用短划线替换img，然后将文本放入<input type="hidden" />。

我说使用图片而不是实际破折号的原因是你最终不会使用<span><span><span>-</span></span></span>。

第二个想法，你可以用“＆amp; ndash;”代替“ - ”。

Answer 4

您无法设置短划线（“ - ”）的样式，但您可以为每个数字和短划线创建跨度。然后分配给每个不同的类。

像这样。

<div>
    <span class="red">4</span>
    <span class="green">-</span>
    <span class="red">7</span>
    <span class="green">-</span>
    <span class="red">3</span>
</div>

文本输入中的CSS样式特定字符

4 个答案: