在用户在文本框中输入文本时使用JavaScript更改行的背景色,可以通过以下步骤实现:
<input type="text" id="textInput" onkeyup="changeBackgroundColor()" placeholder="在这里输入文本">
<div id="output">
<div class="row">行1</div>
<div class="row">行2</div>
<div class="row">行3</div>
</div>
function changeBackgroundColor() {
var textInput = document.getElementById("textInput").value; // 获取文本框的值
var rows = document.getElementsByClassName("row"); // 获取所有行的元素
for (var i = 0; i < rows.length; i++) {
if (rows[i].innerHTML.indexOf(textInput) !== -1) { // 判断行的文本是否包含输入的文本
rows[i].style.backgroundColor = "yellow"; // 如果包含,将行的背景色设置为黄色
} else {
rows[i].style.backgroundColor = "white"; // 如果不包含,将行的背景色设置为白色
}
}
}
.row {
padding: 10px;
border: 1px solid black;
margin-bottom: 5px;
}
这样,当用户在文本框中输入文本时,JavaScript会监听输入事件,并根据输入的文本内容来更改行的背景色。如果行的文本包含输入的文本,背景色将变为黄色;如果不包含,背景色将恢复为白色。
推荐的腾讯云相关产品:无
希望以上内容能够满足您的需求。如有其他问题,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云