当<input>输入文字是'123'时,文字变色
时间: 2024-05-03 07:21:28 浏览: 43
可以使用以下代码实现:
HTML代码:
```
<input type="text" id="inputText" oninput="changeColor()" />
```
JavaScript代码:
```
function changeColor() {
var input = document.getElementById("inputText");
if (input.value === "123") {
input.style.color = "red";
} else {
input.style.color = "black";
}
}
```
当用户在输入框中输入文字时,会触发`changeColor()`函数。该函数首先获取输入框的值,如果值为"123",则将输入框的文字颜色设置为红色,否则设置为黑色。
相关问题
<input type="text" />怎么在里面家文字
您可以在 input 标签中使用 placeholder 属性来添加提示文字,例如:
```html
<input type="text" placeholder="请输入文字">
```
当用户点击输入框时,该提示文字将自动消失,用户可以输入自己的文字。如果您需要在输入框中添加默认值,可以使用 value 属性,例如:
```html
<input type="text" value="默认值">
```
这样在用户未输入任何内容时,输入框会显示默认值。当用户开始输入内容时,默认值将被覆盖。
input输入内容变色
你可以使用 JavaScript 来实现输入框中输入内容变色的效果。以下是一个示例:
HTML 代码:
```
<input type="text" id="input">
```
CSS 代码:
```
#input {
width: 200px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
}
```
JavaScript 代码:
```
// 获取元素对象
var input = document.getElementById('input');
// 监听输入框的输入事件
input.addEventListener('input', function() {
// 获取输入框中的文本内容
var text = input.value;
// 将文本内容的前三个字符变为红色
var coloredText = '<span style="color: red;">' + text.substr(0, 3) + '</span>' + text.substr(3);
// 将变色后的文本内容设置为输入框的值
input.value = coloredText;
});
```
在 JavaScript 代码中,我们监听了输入框的 `input` 事件,当输入框中的文本内容发生变化时,将前三个字符变为红色,并将变色后的文本内容设置为输入框的值。你可以根据你的实际需求来修改变色的逻辑。
阅读全文