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

最新推荐文章于 2024-03-27 12:34:06 发布

周思梦

最新推荐文章于 2024-03-27 12:34:06 发布

阅读量1.7w

点赞数 10

分类专栏： JS中表单中的几个常见的事件文章标签： JS中表单中的几个常见的事件

本文链接：https://blog.csdn.net/weixin_37635400/article/details/79945231

版权

JS中表单中的几个常见的事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

<p>第一个：<input type="text" οnfοcus="setStyle(this.id)" id="fname-foucs"></p>
<p>第二个：<input type="text" οnfοcus="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值发生改变时将其转换为大写

<p>输入您的姓名：<input type="text" id="fname-change" οnchange="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>

周思梦

关注

10
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
JS中表单中的几个常见的事件

（1）OnClick事件：鼠标单击事件。实例：建一个JSP文件，代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;JSP Page
复制链接

扫一扫