使用 JavaScript 动态切换占位符颜色

Question

我有一个 HTML 输入，还有一些按钮。

 <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 的值为真，第一个按钮将设置一个占位符。我想弄清楚如何使用 JavaScript 动态设置占位符的颜色。我已经找到如何使用 CSS 来完成它，但我需要 JavaScript。请不要 jQuery 或其他框架。

谢谢！

Travis J 我特别说过这不是重复的，因为我不能使用 CSS，就像你错误地将其标记为

的重复的问题

我只能使用 javscript，不能 css。

Answer 1

可能这不是添加内联样式的正确方法，但这是我发现完全满足 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>

使用 JavaScript 动态切换占位符颜色

Dynamically toggle placeholder color with JavaScript

html

javascript

html-input

getelementbyid

dynamically-generated