JavaScript的onfocus与onblur用法

运气可以啊

于 2019-05-21 15:03:53 发布

阅读量1.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42232623/article/details/90406920

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在做登录的时候，登录界面的文本框中会有一段文字，当鼠标点击文本框时，框内文字消失，当鼠标离开时，那行字又出现了，但当输入文本时那行字便不再显现，此特效是如何实现的呢？实现原理如下

效果如下:
点击用户名前:
在这里插入图片描述

点击用户名后

在这里插入图片描述
代码如下

<input type="text" name="username" 
value="请输入用户名" onfocus="this.value = '';"
 onblur="if (this.value == '') {this.value = '请输入用户名';}"/>

官方释义

onfocus：事件在对象获得焦点时发生。

即当鼠标点击时，触发的事件，

onblur：事件会在对象失去焦点时发生

即当鼠标点击另一处时所触发的事件

至此这个程序的大体流程清晰了：当鼠标点击文本框时，文本框获得焦点，触发onfocus，文本框中的值变为空，鼠标点击另外一处时，即文本框失去焦点，触发onblur事件，进行判断文本框的内容，若value="",则给value赋值请输入用户名.

!DOCTYPE html>
<html>
<head>
	<title>onsubmit用户提交,submit属性,事件</title>
</head>
<script type="text/javascript">
	function fun(){
		var s1 =document.mianform.user.value;
		var s2 = document.mianform.pwd.value ;
		if(s1 == ""||s2 ==""){
			alert('请将内容填写完整');
			return false ;//false不提交
		}
		return true ; // true提交
	}


  function check() {
    var p1 = document.mianform.pwd1.value,
        p2 = document.mianform.pwd2.value;

    if (0 >= p1.trim().length) {
      alert('密码1不可为空');
      // 清空输入框的值
      document.mianform.pwd1.value = "";
      // 将焦点聚焦到输入框
      document.mianform.pwd1.focus();
    }
    if (p1.trim() != p2.trim()) {
      alert('两次不一致');
    }


    
  }
</script>
<body>
	<form name="mianform" onsubmit="return fun()">
		<label>姓名:</label>
		<input type="text" name="user" onfocus="console.log('点击这里输入用户名');" onblur="console.log('文本失去焦点');">
		<br>
		<label>密码:</label>
		<input type="password" name="pwd" >
		<br>
		<input type="submit" value="提交" >
		<br>
		<br>
		<label>用户名</label><input type="text" value="请输入用户名" name="pwd1"  onfocus="this.value='';" onblur="if (this.value == '') {this.value = '请输入用户名';}"/>
    	<label>密码2</label><input type="password" name="pwd2" onblur="check();">
    	
	</form>
</body>
</html>

运气可以啊

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的onfocus与onblur用法

在做登录的时候，登录界面的文本框中会有一段文字，当鼠标点击文本框时，框内文字消失，当鼠标离开时，那行字又出现了，但当输入文本时那行字便不再显现，此特效是如何实现的呢？实现原理如下效果如下:点击用户名前:点击用户名后代码如下<input type="text" name="username" value="请输入用户名" onfocus="this.value = '';" ...
复制链接

扫一扫