檢查表單輸入的文本並更改它的顏色

這裏我有一個問題，我不能克服。這是代碼，我希望腳本改變表單輸入的顏色，當輸入的文本改變：檢查表單輸入的文本並更改它的顏色

function checkName(name) 
{ 
if (name.value == "value1" || name.value == "value2" || name.value == "value3" || name.value == "value4" || name.value == "value5" || name.value == "value6"){ 
document.forms['un'].elements['name'].style.color='#ffbb00' 
} 
else { 
document.forms['un'].elements['name'].style.color='#000000' 
} 
}

正如你可以看到，當輸入的文本與提供者之一相匹配，它應該變爲橙色，和否則，它應該是黑色的。（我有一個輸入用onChange來切換這個函數）我只是不能讓它工作，所以我可以有多種選擇何時更改顏色，並且當語句變爲無效時也會變回。任何幫助？

來源

2012-04-20 SeinopSys

你可以發佈你的完整代碼，也許在jsFiddle？ – SenorAmor 2012-04-20 21:19:26

我還沒有真正讀過任何源代碼來驗證這一點，但是不應該將一個整數傳遞給'document.forms []'而不是一個字符串''un''？ – 2012-04-20 21:19:46

I have an input toggling this function with an onChange thing讓你輸入

<input type=text size=20 name='name' onchange="checkName(this)">

的d功能可能是

function checkName(el) 
{ 
    if (el.value == "value1" || el.value == "value2" || el.value == "value3" || el.value == "value4" || el.value == "value5" || el.value == "value6") 
    { 
     el.style.color='#ffbb00' 
    } 
    else 
    { 
     el.style.color='#000000' 
    } 
}

An example.

你也可以嘗試像onkeyupthis example。

來源

2012-04-20 21:26:15

這工作，謝謝你:) – SeinopSys 2012-04-21 06:30:11

試試這個：

function checkName(element) { 
    if (element.value == ...) { 
     element.className = "inputError"; 
    } else { 
     element.className = ""; 
    } 
}

在你的CSS文件

然後：

.inputError { 
    background-color: #FF0000; 
    background-image: url(exclamation_mark.png); 
    background-position: right 50%; 
    background-repeat: no-repeat; 
    background-size: contain; 
    -moz-background-size: contain; 
    -webkit-background-size: contain; 
    -o-background-size: contain; 
}

現在你已經預先定義的CSS樣式的輸入框，每次你檢查輸入框中可以設置到適當的CSS類名稱。

現在，所有你需要做的是這樣的：

<input id="myTextBox" type="text" onkeyup="javascript: checkName(this);" />

希望這有助於！

來源

2012-04-20 21:23:27 Ozzy

我覺得有點太複雜。 – SeinopSys 2012-04-21 06:32:00

問題出在您的身上我無法正確地將您提供的代碼放到我的頁面中（也許是因爲我剛剛開始網絡編程），所以不要把它當成任何不好的東西，另一個我接受的代碼是I能夠很容易地實現，但這並不意味着你的不好。 ;） – SeinopSys 2012-04-21 14:20:10

您假定文本框中的值自動傳遞給函數checkName。我相信這是你的錯誤。

您可以使用event.srcElement.value參考功能checkName中文本框中的值。

來源

2012-04-20 21:24:56

我不明白它：\ – SeinopSys 2012-04-21 06:21:31

這裏是一個可能的解決方案：http://jsfiddle.net/QJG5R/1/

代碼轉儲：

var input = document.getElementById('blar'); 
var highlights = { 
    'v':'#888888', 
    'va':'#666699', 
    'val':'#4444aa', 
    'valu':'#2222bb', 
    'value':'#0000cc',  
    'value1':'#ff0000', 
    'value2':'#00ff00' 
}; 
input.addEventListener('keyup', function(){ 
    var value = input.value; 
    if (highlights[value]) { 
     input.style.color = highlights[value]; 
    } else { 
     input.style.color = 'black'; 
    }  
});

HTML中包含一個元素： <input id='blar' type='text' />

來源

2012-04-20 21:25:24 david

它應該是'input.addEventListener（....' – SenorAmor 2012-04-20 21:32:58

的確應該更正。 – david 2012-04-20 22:01:15

這對我不起作用，不過謝謝！ – SeinopSys 2012-04-21 06:18:21

檢查表單輸入的文本並更改它的顏色

回答

相關問題