JavaScript常用表单事件用法总结与实例

来源：互联网发布：行知实践园观后感400 编辑：程序博客网时间：2024/06/01 10:28

昨天下班后躺床上没什么事情，又去看了一点JavaScript视频，讲的是常用的表单事件，然后学习了。由于家里电脑坏掉了，没办法写代码，想着写一写才能更加深刻，今天写了一些

原创(原文链接)：JavaScript常用表单事件用法总结与实例 - 任鹏鹏的博客

本章所用到的语法：

//表单事件onfocus  //获取焦点触发onblur   //失去焦点触发onchange  //切换时触发onselect  //选择时触发onsubmit  //表单提交时触发onreset   //表单重置时触发//html元素placeholder   //设置input默认值redonly      //设置为只读

实例代码开始：

<!DOCTYPE HTML><html><head>    <title>JavaScript表单事件</title>    <meta name="viewPort" content="width=device-width,scall,minimum-scale=1.0,maximum-scale=1.0" />    <style>    body{        text-align:center;        padding-top:15px;    }    </style></head><body><div id="zt" style="color:#f00;">这里显示状态</div>    <!-- form表单 -->    <form action="" method="" id="fo" onreset="reSet()">        <p>用户名 <p>        <p><input type="text" name="" value="来呀你选择我呀" id="userName"/></p>        <p>密码</p>        <p><input type="text" name="" placeholder="******" readonly id="userPass" /></p>        <p>性别</p>        <select name="sex" id="sex">            <option value="请选择性别">请选择性别</option>            <option value="男">男</option>            <option value="女">女</option>        </select>        <p><input type="submit" value="提交" />        <p><input type="reset" value="重置" onclick="onreset" />    </form>    <!-- js脚本开始 -->    <script>        //获取用户名的id赋值给变量uName        var uName = document.getElementById("userName");        //获取显示状态的ID        var zt = document.getElementById("zt");        //获得性别的id赋值        var uSex = document.getElementById("sex");        //获取表单的id        var uForm = document.getElementById("fo");        //获得焦点事件 ： onfocus        uName.onfocus = function (){            zt.innerHTML = "获得焦点";        }        //失去焦点事件 ： onblur        uName.onblur = function (){            zt.innerHTML = "失去了焦点";        }        //选择事件 : onselect        uName.onselect = function (){            zt.innerHTML = "你选择我里面的文字了";        }        //切换焦点事件 ： onchange        uSex.onchange = function (){            zt.innerHTML="你切换性别了";        }        //表单提交事件 ： onsubmit        uForm.onsubmit = function(){            //显示提示框是否要提交            var tj = confirm("你真的要提交这个表单");            //判断，不是则返回false(不提交)            if(!tj){                return false;            }        }        //表单重置事件 ： onreset        uForm.onreset = function(){            //显示提示框是否要提交            var tt = confirm("你真的要重置这个表单");            //判断，不是则返回false(不提交)            if(!tt){                return false;            }        }    </script></body></html>

提示：不要把里面的zt.innerHTML = “xxx”换成alert()提示，否则会陷入无限循环！！！

在线预览地址：点我预览

预览文件下载：JavaScript常用表单事件总结与实例.html

阅读全文

0 0