CSS文本框的背景色，僅應用於文本

Question

我有兩個互相重疊的文本框。 第一個文本框“ TextBox1”由用戶輸入定義。 第二個“ TextBox2”由自動完成功能填充。 我的目標是使第一個文本框的背景僅對於鍵入的文本為白色，以便生成的“ TextBox2”僅顯示要返回的帳戶名稱的其余部分。

示例：用戶鍵入“ ut tr”，存儲在“ TextBox2”中的自動完成功能將變為：“ UT培訓”。 我有一個文本轉換來大寫每個單詞的第一個字母，所以在轉換之后（作為用戶鍵入）“ Ut Tr”。

當輸入與“ TextBox2”中的結果重疊時，由於字母大小寫的不同，兩者不匹配。 在其他示例中，這可能導致重大的外觀問題。

因此，如果輸入文本框'TextBox1'的文本背景可以是白色，則用戶將只能看到他們鍵入的內容以及其余的自動完成功能。

謝謝你的幫助！ 這是我的第一篇文章，因此，如果我在不知不覺中做了禁忌，我深表歉意。

這是顯示該視頻外觀的視頻的鏈接： 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">

這是一個正在運行的現場演示。