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

您所在的位置：网站首页 › js常用事件有哪些 › JavaScript常用表单事件用法总结与实例

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

2023-09-26 11:11| 来源: 网络整理| 查看: 265

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

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

本章所用到的语法：

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

实例代码开始：

JavaScript表单事件 body{ text-align:center; padding-top:15px; } 这里显示状态用户名密码性别请选择性别男女 //获取用户名的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; } }

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

在线预览地址：点我预览

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

【本文地址】

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

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

今日新闻

推荐新闻