表单其他事件 地址栏相关信息

<form action="./01_复习.html" method="get">

        <!-- maxlength 属性,限定输入数据的最大位数,如果达到最大位数,不允许继续输入 -->

        账号: <input type="text" maxlength="16"> <span></span><br>

        <h1></h1>

        <button>提交</button>  

    </form>

    <script>

        // 表单其他事件

        // submit  只有提交表单时,会触发的事件

        // focus   标签获取焦点时会触发的事件

        // input   输入数据时会触发的事件

        // change  失去交点并且输入数据改变时会触发的事件

        // 1,获取标签对象

        var oFrom = document.querySelector('form');

        var oIpt = document.querySelector('input');

        var oSpan = document.querySelector('span');

        var oH1 = document.querySelector('h1');

        // 2,获取焦点事件   focus

        // 一般是点击标签,要输入数据时,对输入数据格式的提示

        oIpt.addEventListener('focus' , function(){

            oSpan.innerHTML = '您输入的账号,需要是在8-12位之间';

        })

        // 3,输入事件     input

        // 每次输入数据,都会触发事件

        oIpt.addEventListener('input' , function(){

            // 获取输入的数据

            var oIptVal = oIpt.value;

            oSpan.innerHTML = `您需要输入8-16位账号,您当前已经输入${oIptVal.length}位账号,最多还可以输入${16-oIptVal.length}位账号`;

        })

        // 4,失去焦点    change

        oIpt.addEventListener('change' , function(){

            // 获取输入的数据

            var oIptVal = oIpt.value;

            // 验证数据是否符合规范 验证长度

            if(oIptVal.length >= 8 && oIptVal.length <= 16){

                oH1.innerHTML = '';

            }else{

                oH1.innerHTML = '<em style="color:red">账号长度不符合规范</em>'

            }

        })

 

  <div>点我跳转百度</div>

    <script>

        // 地址栏的相关信息

        // 浏览器地址栏的相关信息,都存储在window.location 属性中

        // window.location.href 中存储的是地址栏中的相关信息

        // 中文会显示为 %2位十六进制数值 形式

        // 如果只是浏览器使用,没有必要转化,浏览器可以正常的解析显示这些内容

        // 往往是判断比较时需要使用

        // 转化方法: decodeURI()  decodeURIComponent()

        //          都可以转化显示中文,本质上没有区别

        // window.location.search 中存储的是

        // 通过get方式,在地址栏中,存储的传参数据信息

        // 中文显示也是需要转化

        // 可以通过设定 window.location.href 来完成页面的跳转

        // 页面的跳转,不在需要超链接

        console.log(window.location);

        console.log(window.location.href);

        console.log( decodeURI(window.location.href) );

        console.log( decodeURIComponent(window.location.href) );

        // https://blog.csdn.net/java_xxxx/article/details/85260006

        // 通过点击事件跳转其他页面

        var oDiv = document.querySelector('div');

        oDiv.addEventListener('click' , function(){

            window.location.href = 'https://www.baidu.com';

        })