js练习8 --- 事件处理程序、表单脚本

漂流の少年

已于 2022-05-30 08:42:25 修改

阅读量364

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： javascript 前端

于 2022-05-28 20:32:50 首次发布

本文链接：https://blog.csdn.net/YINZHE__/article/details/125022668

版权

HTML+CSS+JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.第一题

某网页中，假设有一个按钮，请完成下列操作，需要考虑跨游览器的情况。
1.当把鼠标移到按钮上，按钮的颜色会发生变化，移走后消失;
2.假设按钮点击后发生动态的改变了网页的背景颜色，并且弹出游览器的版本信息;
3.假设按钮点击后默认操作是访问南林官网，现在需要将其行为阻止。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <a href="https://www.njfu.edu.cn/" id="myLink">
    <button id="myBtn">按钮</button>
  </a>
  <script>
    let btn = document.getElementById("myBtn");
    let handler = function(event){
      switch(event.type){
        case "mouseover":
          event.target.style.backgroundColor = "lightblue";
          break;
        case "mouseout":
          event.target.style.backgroundColor = "";
          break;
      }
    };
    let handler2 = function(event) {
      let appVersion = navigator.appVersion;
      event.currentTarget.style.backgroundColor = "gray";
      setTimeout(function() {
        alert(appVersion);
      }, 100); //背景颜色改变需要时间,防止在这期间alert阻塞JS,从而保证背景颜色先变,然后再alert
    }
    btn.onmouseover = handler;
    btn.onmouseout = handler;
    document.body.onclick = handler2;

    //阻止默认跳转
    let link = document.getElementById("myLink");
    link.onclick = function(event){
        event.preventDefault();
    };
  </script>
</body>
</html>

2.第二题

某网页用户注册页面，包含需要填写的内容:姓名(文本框)，性别(选择按钮)，出生年月日（文本框)，身份证号码（文本框)，手机号码(文本框）。
      ·使用自动对焦功能，针对后三个文本框，当输入完一个文本框，自动跳转到下一个文本框。
      ·需要考虑过滤输入，针对后三个文本框，对于非数字的输入，直接屏蔽。
  ·对于姓名文本框，需要对非法字符的提醒，包括:数字和标点。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <h3>注册</h3>
  <form method="post" action="" id="myForm">
    <label for="username">姓名:</label> <input type="text" name="username" id="username" onchange="checkInput(event)" required>
    <br/>
    <label for="username">性别:</label>
    <input type="radio" name="sex" value="male" checked="checked" id="male" />
    <label for="male">男</lable>
    <input type="radio" name="sex" value="female" id="female" />
    <label for="female">女</label>
    <br />
    <label for="birthDate">出生年月:</label> <input type="text" name="birthDate" id="birthDate" maxlength="8">
    <br/>
    <label for="idNumber">身份证号码:</label> <input type="text" name="idNumber" id="idNumber" maxlength="18">
    <br/>
    <label for="tel">手机号码:</label> <input type="text" name="tel" id="tel" maxlength="11">
    <br/>
    <button>提交</button>
  </form>
  <script>
    // 自己封装EventUtil对象
    let EventUtil = {
      addHandler: function(element, type, handler){
          if (element.addEventListener){
              element.addEventListener(type, handler, false);
          } else if (element.attachEvent){
              element.attachEvent("on" + type, handler);
          } else {
              element["on" + type] = handler;
          }
      },
      getEvent: function(event){
          return event ? event : window.event;
      },
      getTarget: function(event){
          return event.target || event.srcElement;
      },
      getCharCode: function(event){
        if (typeof event.charCode == "number"){
            return event.charCode;
        } else {
            return event.keyCode;
        }
      },
      preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
      }
    };
    
    // 自动对焦
    (function(){     
       function tabForward(event){            
          event = EventUtil.getEvent(event);
          let target = EventUtil.getTarget(event);
          if (target.value.length == target.maxLength){
              let form = target.form;
              let len = form.elements.length;
              for (let i=0; i < len; i++) {
                  if (form.elements[i] == target) {
                      if (form.elements[i+1]){
                          form.elements[i+1].focus();
                      }
                      return;
                  }
              }
          }
       }           
       let textbox1 = document.getElementById("birthDate"),
           textbox2 = document.getElementById("idNumber"),
           textbox3 = document.getElementById("tel");
       EventUtil.addHandler(textbox1, "keyup", tabForward);        
       EventUtil.addHandler(textbox2, "keyup", tabForward);        
       EventUtil.addHandler(textbox3, "keyup", tabForward);              
   })();

    // 过滤输入
    (function(){
      function shieldNaN(event) {
        event = EventUtil.getEvent(event);
        let target = EventUtil.getTarget(event);
        let charCode = EventUtil.getCharCode(event);
        // 屏蔽非数字
        if (!/\d/.test(String.fromCharCode(charCode))){
            EventUtil.preventDefault(event);
        }
      }
      let birthDate = document.getElementById("birthDate");
      let idNumber = document.getElementById("idNumber");
      let tel = document.getElementById("tel");
      EventUtil.addHandler(birthDate, "keypress", shieldNaN);
      EventUtil.addHandler(idNumber, "keypress", shieldNaN);
      EventUtil.addHandler(tel, "keypress", shieldNaN);
    })();

    // 非法字符提醒
    function checkInput(event) {
      let text = event.target.value;
      if(/\d/.test(text) || /[,|.|?|!|:|"|']/.test(text)) {
        alert("请勿输入数字和标点！");
      }
    }
  </script>
</body>
</html>

3.第三题

某网页中有个多项选框，选择用户熟练的编程语言，现选选择框内有:C，C++，Java，JavaScript，PHP五个选项，使用DOM方法完成以下操作:
1．实现多项选择。
2.添加两个选择:Python和Perl，并移除掉PHP。
3．将Python项移到Java之后。
4．添加一个多选框，把Java和Python移动到添加的多选框中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div>
    <label for="selLanguage">选择您熟悉的编程语言：</label>
    <select name="selLanguage" id="selLanguage" size="5" multiple>
        <option value=" C">C</option>
        <option value="C++">C++</option>
        <option value="Java">Java</option>
        <option value="Javascript">Javascript</option>
        <option value="PHP">PHP</option>
    </select>
    <select name="selLanguage2" id="selLanguage2" size="5" multiple>
    </select>
    <br/><br/>
    <button id="btn1">添加Python和Perl,并移除PHP</button>
    <button id="btn2">将Python移到Java之后</button>
    <button id="btn3">将Java和Python移到新增的多选框</button>
  </div>

  <script>
    let EventUtil = {
      addHandler: function(element, type, handler){
          if (element.addEventListener){
              element.addEventListener(type, handler, false);
          } else if (element.attachEvent){
              element.attachEvent("on" + type, handler);
          } else {
              element["on" + type] = handler;
          }
      }
    }
    let btn1 = document.getElementById("btn1");
    let btn2 = document.getElementById("btn2");
    let btn3 = document.getElementById("btn3");

    // 添加Python和Perl,并移除PHP
    EventUtil.addHandler(btn1, "click", function(event){
      let selectbox = document.getElementById("selLanguage");
      let newOption = new Option("Python", "Python");
      selectbox.add(newOption, null);
      let newOption2 = new Option("Perl", "Perl");
      selectbox.add(newOption2,null);
      selectbox.remove(4); // 移除PHP
    });

    // 将Python移到Java之后
    EventUtil.addHandler(btn2, "click", function(event){
        let selectbox = document.getElementById("selLanguage");
        let textbox = document.getElementById("txtIndex");
        let optionToMove = selectbox.options[4];
        selectbox.insertBefore(optionToMove, selectbox.options[3]);
    });

    // 将Java和Python移到新增的多选框
    (function(){                
      let btn3 = document.getElementById("btn3");
      EventUtil.addHandler(btn3, "click", function(event){
        let selectbox1 = document.getElementById("selLanguage"),
            selectbox2 = document.getElementById("selLanguage2");
        selectbox2.appendChild(selectbox1.options[2]);
        selectbox2.appendChild(selectbox1.options[2]);
      });
    })();
  </script>
</body>
</html>