我想使用類自動更改多個文本框顏色。
<input type="text" Class="ChangeColor" />
<input type="text" Class="ChangeColor" />
<input type="text" Class="ChangeColor" />
文本框 1：如果我鍵入 25（正值），則字體顏色為綠色
文本框 2：如果我鍵入 -2（負值），則字體顏色為紅色
文本框 3：如果我鍵入 0，則字體顏色為黑色
注意：我不會使用唯一 ID，請幫助
uj5u.com熱心網友回復：
您將需要使用 JavaScript 從輸入中獲取值。
使用來自輸入的值，如果值大于 25，您可以添加邏輯將顏色更改為綠色。
uj5u.com熱心網友回復：
在這里，使用 CSS 類 - 添加 Not A Number ( NaN) 作為獎勵
const classes = ['nan', 'negative', 'zero', 'positive'];
document.querySelectorAll('input.ChangeColor')
.forEach(input => input.addEventListener('input', function(e) {
this.classList.remove(...classes);
if (this.value.length) {
this.classList.add(classes[(Math.sign( this.value) 2) || 0]);
}
}));.ChangeColor.zero {
color: black;
}
.ChangeColor.negative {
color: red;
}
.ChangeColor.positive {
color: green;
}
.ChangeColor.nan {
border-color: red;
}<input type="text" Class="ChangeColor" />
<input type="text" Class="ChangeColor" />
<input type="text" Class="ChangeColor" />uj5u.com熱心網友回復：
const inputs = document.getElementsByClassName("ChangeColor");
Array.prototype.forEach.call(inputs, (item) => {
item.addEventListener("input", function (e) {
if (e.target.value > 0) {
e.target.style.color = "green";
} else if (e.target.value < 0) {
e.target.style.color = "red";
} else {
e.target.style.color = "black";
}
});
});<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<input type="text" class="ChangeColor" />
<input type="text" class="ChangeColor" />
<input type="text" class="ChangeColor" />
<script src="src/index.js"></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436793.html
標籤：javascript css
上一篇：使一組元素水平向左移動