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

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

(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>

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页