4-11练习，请老师检查

来源：4-11 编程练习

慕桂英1122475

2023-03-30 12:18:40

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>onblur和onfocus</title>
    <style type="text/css">
      .red {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    姓名：<input type="text" /> <span></span>

    <script type="text/javascript">
      var input = document.querySelector("input");
      var span = document.querySelector("span");

      input.onfocus = function () {
        if (input.value.length == 0) {
          (span.innerHTML = "请输入您的姓名"),
            (input.style.borderColor = "black");
        }
      };

      input.onblur = function () {
        if (input.value.length == 0) {
          (span.innerHTML = "用户名不能为空"),
            (input.style.borderColor = "red");
        } else {
          span.innerHTML = "";
        }
      };
    </script>
  </body>
</html>

写回答

1回答