chapter 14 表单脚本

来源：互联网发布：酷家乐绘图软件编辑：程序博客网时间：2024/05/20 16:33
<!doctype><html><head><meta charset="UTF8">    <title>chapter 14 表单脚本</title></head><body>    <h1>HTMLFormElement</h1>    <form name="myform" id="myform">        <input autofocus size=25></input>        <!-- 自动获取焦点 -->        <input></input>        <textarea rows ="25" cols="5"></textarea>        <p>注意textarea与input在设置大小的区别，两者都支持select()方法选中所有文本，相应的会触发select事件</p>        <input type="number" min="0" max="100" step="5" id="count" ></input>        <p>pattern模式匹配，指定pattern不能阻止用户输入无效文本，还是需要在JS中处理</p>        <input type="text" pattern="\d+" id =a"count1"></input>    </form></body><script type="text/javascript">window.onload = function(){    var form = document.getElementById("myform");    // 1.表单提交    form.addEventListener("submit",function(event){        // 检查数据合法性，若不合法，调用        // event.preventDefault()取消表单提交表单冲    })    // 采用form.submit()方式提交表单是不会触发submit事件，应注意数据合法性的验证    // 防止重复提交表单的方法，在表单提交一次之后禁用提交按钮，注意不能通过onclick事件实现    // 原因是：有的浏览器会在submit事件之前触发onclick事件，导致表单提交失败    // 或者利用onsubmit事件处理程序取消提交操作    // 2.重置 ，type=reset的按钮    form.addEventListener("reset",function(event){        event.preventDefault();//阻止表单重置    })    // event.reset();//和点击reset按钮效果相同，会触发reset事件    // 表单字段的访问    // form.elements    var element = form.elements[0];    if(element.autofocus){        console.log("autofocus");    }    else{        element.focus();        console.log("JS focus");    }    // 利用blur才创建readonly字段    var a = form.elements[1];    a.onclick = function(){        a.blur();        console.log("JS blur");    }    // HTML5的约束验证API    // required，type=email和type= url类型，数值范围number、date、range、datetime-local、datetime、month、time、week等    var number = document.getElementById("count");    number.onblur = function(){        number.stepUp(1);        // number.stepDown(1);减少一个step     }}</script></html>
0 0