表单事件 onfocus与onblur,以及onsubmit与onreset

最新推荐文章于 2024-04-26 16:47:03 发布

码农的N次方

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量988

点赞数

文章标签：实例 javascript

本文链接：https://blog.csdn.net/qq_38384536/article/details/73770904

版权

示例一：onfocus与onblur事件

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.ccc{ color:#ccc;}

</style>
</head>

<body>
电话:<input class="ccc" type="text">
<br>
姓名:<input class="ccc" type="text">

</body>
</html>
<script>
var oInput=document.getElementsByTagName('input');

function placeHolder(obj,txt){ //对象提示语
//先设定value
obj.value=txt;

obj.οnfοcus=function(){//获得焦点
if(this.value==txt){
this.value="";
this.className="";
};
};
obj.οnblur=function(){//失去焦点
if(this.value==""){
this.value=txt;
this.className="ccc";
}
};
};

placeHolder(oInput[0],"请输入电话");

placeHolder(oInput[1],"请输入姓名");

</script>

元素失去焦点时

元素获得焦点时

示例二：form表单的onsubmit与onreset事件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<form id="myform">
姓名:<input type="text">
<br>
爱好:<input type="checkbox">读书 <input type="checkbox">跑步
<br>
<input type="reset" value="重置">


<input type="submit" value="提交">
</form>

</body>
</html>
<script>
var oForm=document.getElementById('myform');
oForm.οnsubmit=function(){//submit按钮,触发form的onsubmit事件
alert("准备提交");
};
oForm.οnreset=function(){ //reset按钮触发form的onreset事件
alert("重置");
};

</script>

码农的N次方

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单事件 onfocus与onblur,以及onsubmit与onreset

表单事件onblur 元素失去焦点onfocus 元素获得焦点onreset 重置按钮被点击onsubmit 提交按钮被点击onchange 内容改变时触发
复制链接

扫一扫