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

我有兩個相互重疊的文本框。第一個文本框'TextBox1'由用戶輸入定義。第二個「TextBox2」由自動完成功能填充。我的目標是讓第一個文本框的背景僅用於輸入文本的白色，以便生成的「TextBox2」僅顯示返回的帳戶名稱的其餘部分。CSS僅應用於文本的文本框的背景顏色

示例：用戶類型「ut tr」和存儲在「TextBox2」中的自動完成變爲：「UT Training」。我有一個文本轉換大寫每個單詞的第一個字母，以便在轉換後（如用戶鍵入）「Ut Tr」。

當輸入與'TextBox2'中的結果重疊時，由於字母大小寫不同，兩者不匹配。這可能導致其他例子中的主要美容問題。

因此，如果輸入文本框'TextBox1'的文本背景可能爲白色，那麼用戶只會看到他們輸入的內容以及自動完成的其餘部分。

感謝您的幫助！這是我的第一篇文章，所以我很抱歉，如果我不知不覺地做了anthing禁忌。

這裏是一個視頻的鏈接，顯示如何這個樣子：http://screencast.com/t/ef6dBJyU2X14

來源

2012-08-09 CVetter

這是一個有趣的自動完成方法......我個人覺得它有點容易出現繁瑣的問題，但是對於很酷的想法挺身而出。 – diracdeltafunk 2012-08-09 17:55:35

這對我來說有點不清楚你的問題是什麼。 – Faust 2012-08-10 10:10:10

從我發現的內容來看，CSS的background-color屬性應用於整個元素。我偶然發現在元素中有一個跨度有背景顏色，但我不知道如何在文本框內做到這一點，或者如果這足以解決我的問題 – CVetter 2012-08-10 13:05:08

您可以檢查現在有多少個字符是由用戶輸入，通過類似於：

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

在這之後將自動完成中的第一個N = inputLength字符的顏色更改爲白色。也許，用子：

substring(0, inputLength);

來源

2012-08-09 17:38:36

我相當肯定這會應用背景顏色對於文本框的整個寬度，因此掩蓋了「TextBox2」。目前，兩個文本框的背景顏色都是透明的，因此當文本重疊時，兩者都可見。 'TextBox1的文本是黑色的，因此它對用戶來說顯示在'TextBox2'的頂部，該文本具有綠色文本。 – CVetter 2012-08-10 13:08:49

看起來你有不合理的結構複雜。你能否清楚地說出，你想達到什麼目標，那麼就有可能提出解決方案。 – 2012-08-10 13:13:13

下面是目前看起來像的視頻：[link]（http://screencast.com/t/ef6dBJyU2X14）現在text-transform：capitalize會處理大多數問題，但不是全部。我想爲用戶輸入不改變，當他們鍵入的東西，這就是爲什麼我正在追求我的問題 – CVetter 2012-08-10 13:29:06

您可以將類添加到您的輸入和申請，像一個CSS樣式;

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

Here是一個工作現場演示。

來源

2012-08-10 13:51:54

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

回答

相關問題