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

2017-09-29  本文已影响0人  任鹏鹏_Chumbir

昨天下班后躺床上没什么事情,又去看了一点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

上一篇下一篇

猜你喜欢

热点阅读