CSS仅适用于文本的文本框的背景颜色

Question

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

示例：用户类型＆＃34; ut tr＆＃34;以及存储在＆＃39; TextBox2＆＃39;中的自动完成功能变为：  ＆＃34; UT培训＆＃34;。我有一个文本转换来大写每个单词的第一个字母，所以在变换后（用户输入）＆＃34; Ut Tr＆＃34;。

当输入与＆＃39; TextBox2＆＃39;中的结果重叠时由于信件的不同，两者不相符。在其他例子中，这可能会导致严重的美容问题。

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

感谢您的帮助！这是我的第一篇文章，所以如果我在不知不觉中做了一些禁忌，我会道歉。

以下链接指向视频的视频：http://screencast.com/t/ef6dBJyU2X14

Answer 1

您可以通过以下类似方式检查用户现在输入的字符数：

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

在此之后，您的自动中的第一个N = inputLength个字符的颜色会变为白色。可能使用子字符串：

substring(0, inputLength);

Answer 2

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

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

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