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
