脚本宝典收集整理的这篇文章主要介绍了web前端笔记(9)-js表单事件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一,onsubmIT:表单中的确认按钮被点击时发生的事件,如下案例。
案例解析:弹出表单中提交的内容
<form name="testform" action="#" id="form"> What is your name?<br /> <input tyPE="text" name="fname" /> <input type="submit" value="Submit" /> </form> <script type="text/javascript"> VAR form = document.getElementById('form'); form.onsubmit = function(){ alert('Hello ' + testform.fname.value +'!'); } </script>
二,onblur:在对象失去焦点时发生的事件,如下案例
案例解析:我们将在用户离开输入框时执行 JavaScript 代码
<p>请输入你的英文名字: <input type="text" id="fname"></p> <p>请输入你的年龄: <input type="text" id="age"></p> <script type="text/javascript"> function upperCase(){ var x=document.getElementById("fname").value; document.getElementById("fname").value=x.toUpperCase(); } var fname = document.getElementById('fname'); var age = document.getElementById('age'); fname.onblur = function (){ upperCase(); } age.onblur = function (){ alert('age is ' + this.value); } </script>
三,onfoucs:在对象获得焦点时发生的事件,案例如下
<!--onfoucs事件--> <p>第一个:<input type="text" onfocus="setStyle(this.id)" id="fname-foucs"></p> <p>第二个:<input type="text" onfocus="setStyle(this.id)" id="lname-foucs"></p> <script type="text/javascript"> function setStyle(x) { document.getElementById(x).style.background = "yellow"; } </script>
四,onchange:在对象的值发生改变时触发的事件,案例如下
案例解析:当输入框的value值发生改变时将其转换为大写
<!--onchange事件--> <p>输入您的姓名:<input type="text" id="fname-change" onchange="upperCase(this.id)" /></p> <script type="text/javascript"> function upperCase(x) { var y = document.getElementById(x).value; document.getElementById(x).value = y.toUpperCase(); } </script>
五,onload事件:在页面或者图片加载完成以后执行的代码,案例如下:
<script type="text/javascript"> window.onload = function(){ alert('页面加载已完成,会执行之后的代码'); } </script>
一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例。
案例解析:弹出表单中提交的内容
<form name="testform" action="#" id="form"> What is your name?<br /> <input type="text" name="fname" /> <input type="submit" value="Submit" /> </form> <script type="text/javascript"> var form = document.getElementById('form'); form.onsubmit = function(){ alert('Hello ' + testform.fname.value +'!'); } </script>
二,onblur:在对象失去焦点时发生的事件,如下案例
案例解析:我们将在用户离开输入框时执行 JavaScript 代码
<p>请输入你的英文名字: <input type="text" id="fname"></p> <p>请输入你的年龄: <input type="text" id="age"></p> <script type="text/javascript"> function upperCase(){ var x=document.getElementById("fname").value; document.getElementById("fname").value=x.toUpperCase(); } var fname = document.getElementById('fname'); var age = document.getElementById('age'); fname.onblur = function (){ upperCase(); } age.onblur = function (){ alert('age is ' + this.value); } </script>
三,onfoucs:在对象获得焦点时发生的事件,案例如下
案例解析:当输入框获得焦点时,其背景颜色将改变,
<!--onfoucs事件--> <p>第一个:<input type="text" onfocus="setStyle(this.id)" id="fname-foucs"></p> <p>第二个:<input type="text" onfocus="setStyle(this.id)" id="lname-foucs"></p> <script type="text/javascript"> function setStyle(x) { document.getElementById(x).style.background = "yellow"; } </script>
四,onchange:在对象的值发生改变时触发的事件,案例如下
案例解析:当输入框的value值发生改变时将其转换为大写
<!--onchange事件--> <p>输入您的姓名:<input type="text" id="fname-change" onchange="upperCase(this.id)" /></p> <script type="text/javascript"> function upperCase(x) { var y = document.getElementById(x).value; document.getElementById(x).value = y.toUpperCase(); } </script>
五,onload事件:在页面或者图片加载完成以后执行的代码,案例如下:
<script type="text/javascript"> window.onload = function(){ alert('页面加载已完成,会执行之后的代码'); } </script>
以上是脚本宝典为你收集整理的web前端笔记(9)-js表单事件全部内容,希望文章能够帮你解决web前端笔记(9)-js表单事件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。