首页 > 其他 > 详细

样式操作案例4-高亮显示背选中的文本框

时间:2019-08-24 17:00:39      阅读:47      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input type="button" value=" 提交 ">
  <script>
    var inputs = document.getElementsByTagName(‘input‘);
    for (var i = 0; i < inputs.length; i++) {
      var input = inputs[i];
      // 判断input是否是文本框
      if (input.type !== ‘text‘) {
        continue;
      } 
      // 让当前正在输入的文本框 高亮显示
      input.onfocus = function () {
        // 让所有的文本框去掉高亮的效果
         for (var i = 0; i < inputs.length; i++) {
           var input = inputs[i];
           if (input.type !== ‘text‘) {
             continue;
           }
           // 去除所有文本框高亮显示
           input.style.backgroundColor = ‘‘;
         }
        
        // 当前文本框高亮显示
        this.style.backgroundColor = ‘lightgray‘;
        
      }
    }
  </script>
</body>
</html>

 

样式操作案例4-高亮显示背选中的文本框

原文:https://www.cnblogs.com/jiumen/p/11405044.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!