css - 仅应用于文本的文本框的 CSS 背景颜色

Question

我有两个相互重叠的文本框。第一个文本框“TextBox1”由用户输入定义。第二个“TextBox2”由自动完成功能填充。我的目标是让第一个文本框的背景仅为已键入的文本为白色，以便生成的“TextBox2”仅显示返回的帐户名称的其余部分。

示例：用户键入“ut tr”，存储在“TextBox2”中的自动完成变为：“UT Training”。我有一个文本转换来大写每个单词的第一个字母，所以在转换之后（当用户键入）“Ut Tr”。

当输入与“TextBox2”中的结果重叠时，由于字母大小写的不同，两者不匹配。在其他示例中，这可能会导致严重的外观问题。

因此，如果输入文本框“TextBox1”的文本背景可能是白色的，那么用户将只能看到他们输入的内容以及自动完成的其余部分。

谢谢你的帮助！这是我的第一篇文章，所以如果我在不知不觉中做了任何禁忌，我深表歉意。

这是一个视频链接，展示了它的外观：http ://screencast.com/t/ef6dBJyU2X14

score 0 · Accepted Answer

您可以在输入中添加一个类并为其应用 CSS 样式；

.someclass{
    color:#FFF;
    background-color:#FFF;
    border: solid 1px #000;
}
<input type="text" class="someclass">

这是一个有效的现场演示。

score 0 · Accepted Answer

您可以检查用户现在输入了多少个字符，方法类似于：

$('#myInput').on('keydown', function() {
    inputLength = $(this).val().length
});

N = inputLength然后将自动完成中第一个字符的颜色更改为白色。可能，使用子字符串：

substring(0, inputLength);

2 回答 2