用JavaScript動態切換佔位符顏色

我有一個HTML輸入以及一些按鈕。用JavaScript動態切換佔位符顏色

<input type="number" placeholder="" id="id"/> 
<button onclick="myfunction()" >Click Me</button> 
<button onclick="toggle()">toggle</button>

第一個按鈕有這個JavaScript函數

var myfunction=function(){ 
    if(bool){ 
     a=document.getElementById('id'); 
     a.placeholder='Invalid Character'; 
    } 
}; 
bool=false;

和第二個按鈕的功能是這樣的：

toggle=function(){ 
    bool=!bool; 
};

基本上，點擊第二個按鈕來改變是否

bool

是真或假。如果bool的值爲true，第一個按鈕將設置一個佔位符。我想弄清楚如何用JavaScript動態設置佔位符的顏色。我發現如何用CSS做到這一點，但我需要JavaScript。請不要使用jQuery或其他框架。

謝謝！

特拉維斯Ĵ我具體說，這不是一個重複，因爲我不能使用CSS，像問題，你錯誤地標記將此作爲

重複我只能用javscript，而不是CSS。

來源

2015-09-09 Leshy

@TravisJ這不是一個重複，因爲那些只使用CSS或jQuery的，我可以用也沒有。 – Leshy

爲什麼你不能使用CSS？可以從JavaScript呈現CSS。 –

我需要使用JavaScript動態完成此操作。我不能使用css（在樣式表中;如果你知道使用javascript來操作css的方式，我很高興） – Leshy

可能這不是添加內聯樣式的正確方法，但這是我發現完全滿足OP要求的唯一方法。

var placeholderColor = '#f0f'; 
 
var FontColor = '#000'; 
 

 
bool = true; 
 

 
function toggle() { 
 
    bool = !bool; 
 
} 
 

 
function myfunction() { 
 
    if (bool) { 
 
     a = document.getElementById('id'); 
 
     a.placeholder = 'Invalid Character'; 
 
     a.style.color = placeholderColor; 
 
    } 
 
} 
 

 
function textChange() { 
 
    a = document.getElementById('id'); 
 
    if (a.value != '') a.style.color = FontColor; 
 
    else { 
 
     a.placeholder = 'Invalid Character'; 
 
     a.style.color = placeholderColor; 
 
    } 
 
}

<input type="text" id="id" onkeyup='textChange()' /> 
 
<button onclick="myfunction()">Click Me</button> 
 
<button onclick="toggle()">toggle</button>

來源

2015-09-10 04:51:05

用JavaScript動態切換佔位符顏色

回答

相關問題