JS中表单中的几个常见的事件

原创 2018年04月14日 23:43:49

(1)OnClick事件:鼠标单击事件。

实例:建一个JSP文件,代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript">
        function check(){ 
        alert("你好");
        }
        </script>
    </head>
    <body>
    <input type='button' value="点我" onclick="check()" />
  </body>

</html>

效果:点击”点我“按钮,就会出现”你好“。

(2)OnSubmit事件:表单中的确定按钮被点击时发生的事件。

案例解析:弹出表单中提交的内容

实例:建一个JSP,代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
         
    </head>
    <body>
    <form name="testform" action="#" id="form">
            你的姓名是:?<br />
            <input type="text" name="fname" />
            <input type="submit" value="提交" />
        </form>
        <script type="text/javascript">
            var form = document.getElementById('form');
            form.onsubmit = function(){
                alert('Hello ' + testform.fname.value +'!');
            }
        </script>
  </body>
</html>

(3)onblur:在对象失去焦点时发生的事件。

案例解析:我们将在用户离开输入框时执行 JavaScript 代码(输入内容之后在空白处点击一下即可)

实例:<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
    <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>
  </body>

</html>

(4)

onfoucs:在对象获得焦点时发生的事件,案例如下

案例解析:当输入框获得焦点时,其背景颜色将改变,

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
    <!--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>
  </body>
</html>

 (5)

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>

(6)onload事件:在页面或者图片加载完成以后执行的代码,案例如下:

<script type="text/javascript">
            window.onload = function(){
                alert('页面加载已完成,会执行之后的代码');
            }
        </script>

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_37635400/article/details/79945231

JavaScript中的一些常用事件

1.onclick事件 点击事件(onclick并不是js中的方法,onclick只是浏览器提供js的一个dom接口,让js可以操作dom,所以onclick大小写都是没问题的,比如HTML代码就不用...
  • u012027874
  • u012027874
  • 2016-07-16 23:49:32
  • 2903

js设置form的onsubmit事件

document.getElementById('myform').onsubmit = function(e) { var e = e || window.event; if (e....
  • duchao123duchao
  • duchao123duchao
  • 2016-04-19 19:37:37
  • 2140

[js笔记] focus和blur事件之表单验证

focus 当一个元素获得焦点时,这个DOM节点会触发focus事件 blur 当一个元素失去焦点时,这个DOM节点会触发blur事件 ...
  • Coder__CS
  • Coder__CS
  • 2017-04-30 16:37:58
  • 992

JS动态生成表单,并添加行双击事件

第一步:jsp上定义表格的div 记账日期 记账人 出库单号 往来单位 数量 售价金额 进价金额 第二步:JS使用Ajax获得后台数据,并写入到表格中 //获取某一出库类型某日期所有出库...
  • eagle199012
  • eagle199012
  • 2013-08-22 14:58:17
  • 1362

js中的一些常见的事件。

在ios中控件有点击,长按,等事件,在js类似的,也有这样事件,我们通过捕捉这样事件对页面进行操作,来完成想达到的目的、` js中常用的事件 ...
  • qq_31927785
  • qq_31927785
  • 2017-05-19 16:57:47
  • 161

表单事件属性

表单事件是由HTML表单内部的动作触发事件,适用于所有的HLML5元素,主要用于表单元素中。表单事件属性如下所示: onblur :当元素失去焦点时触发事件 onchange :当元素改变时触发事...
  • qq_36689512
  • qq_36689512
  • 2017-02-04 19:08:09
  • 954

JS中的常用事件

常用事件 鼠标移动事件  onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定  onmouseover : 鼠标悬停事件 鼠标悬停事件: 当鼠标移动到某个控件上面的...
  • CSDN_GIA
  • CSDN_GIA
  • 2016-11-27 20:24:51
  • 2245

js中的焦点事件问题

在web页面中,经常要实现这样一个js功能:鼠标焦点落到输入框内,输入框原有默认值消失,当失去焦点时,如果用户未输入任何内容,怎还是显示默认值。 今天在修改一页面时,发现一个问题:在页面是可以实现上述...
  • karen_wang
  • karen_wang
  • 2011-01-05 18:34:00
  • 14331

javascript事件的三个阶段

js事件的三个阶段分别为:捕获、目标、冒泡 1.捕获:事件由页面元素接收,逐级向下,到具体的元素 2.目标:具体的元素本身 3.冒泡:跟捕获相反,具体元素本身,逐级向上,到页面元素 IE5.5:d...
  • qq_20353887
  • qq_20353887
  • 2016-11-04 10:47:02
  • 2349

JavaScript监听input等表单输入框的变化事件oninput

js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变...
  • u013063153
  • u013063153
  • 2016-09-10 22:20:37
  • 3741
收藏助手
不良信息举报
您举报文章:JS中表单中的几个常见的事件
举报原因:
原因补充:

(最多只允许输入30个字)