首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在用户在文本框中输入文本时使用javascript更改行的背景色

在用户在文本框中输入文本时使用JavaScript更改行的背景色,可以通过以下步骤实现:

  1. 首先,需要在HTML中创建一个文本框和一些行,用于展示用户输入的文本。
代码语言:html
复制
<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>
  1. 接下来,在JavaScript中编写一个函数来监听文本框的输入,并根据输入的文本内容来更改行的背景色。
代码语言:javascript
复制
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"; // 如果不包含,将行的背景色设置为白色
    }
  }
}
  1. 最后,可以根据需要自定义CSS样式来美化行的外观。
代码语言:css
复制
.row {
  padding: 10px;
  border: 1px solid black;
  margin-bottom: 5px;
}

这样,当用户在文本框中输入文本时,JavaScript会监听输入事件,并根据输入的文本内容来更改行的背景色。如果行的文本包含输入的文本,背景色将变为黄色;如果不包含,背景色将恢复为白色。

推荐的腾讯云相关产品:无

希望以上内容能够满足您的需求。如有其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券