在打字时改变文字文本的颜色。

时间:2021-11-25 19:20:16

I type in a text box which gives matched data then change the color of text and type second time then change other color then type again then again change color.

我输入一个文本框,给出匹配的数据,然后改变文本的颜色,第二次输入,然后改变其他颜色,然后再次输入,然后再次改变颜色。

1 个解决方案

#1


3  

Bind input event handler to the textfield using on() and inside event handler change color from an array

使用on()将输入事件处理程序绑定到textfield,内部事件处理程序从数组中更改颜色

var color = ['red', 'yellow', 'red', 'blue', 'brown'];
var i = 0;
$('#text').on('input',function() {
  $(this).css('color', color[i]);
  i = (i + 1) % color.length;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="text"/>


Or generate random color code using Math.random()

或者使用Math.random()生成随机颜色代码

var color = ['red', 'yellow', 'red', 'blue', 'brown'];
$('#text').on('input', function() {
  $(this).css('color', "#" + (Math.random() * 16777215 | 0).toString(16));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="text" />

#1


3  

Bind input event handler to the textfield using on() and inside event handler change color from an array

使用on()将输入事件处理程序绑定到textfield,内部事件处理程序从数组中更改颜色

var color = ['red', 'yellow', 'red', 'blue', 'brown'];
var i = 0;
$('#text').on('input',function() {
  $(this).css('color', color[i]);
  i = (i + 1) % color.length;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="text"/>


Or generate random color code using Math.random()

或者使用Math.random()生成随机颜色代码

var color = ['red', 'yellow', 'red', 'blue', 'brown'];
$('#text').on('input', function() {
  $(this).css('color', "#" + (Math.random() * 16777215 | 0).toString(16));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="text" />