码迷,mamicode.com
首页 > 编程语言 > 详细

javascript中的常用表单事件用法

时间:2017-05-15 12:01:42      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:window   英文   bsp   span   提交   upper   页面   ext   cas   

下面介绍几种javascript中常用的表单事件;

一,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>

 

javascript中的常用表单事件用法

标签:window   英文   bsp   span   提交   upper   页面   ext   cas   

原文地址:http://www.cnblogs.com/tanxiang6690/p/6855511.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!