JavaScript实现显示隐藏表单文字
更新时间：2021年09月28日 08:31:41 作者：qq_39111074
这篇文章主要为大家详细介绍了JavaScript实现显示隐藏表单文字，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现显示隐藏表单文字的具体代码，供大家参考，具体内容如下
实现思路
运用 onfocus、onblur 事件
onfocus- - -获取焦点（鼠标点击输入框，输入框里面有闪动的光标）
onblur- - -失去焦点（鼠标不选中输入框，输入框里面失去闪动的光标）
1、给输入框设置一个默认值
2、获取输入框对象，给其绑定事件：onfocus 和 onblur
当获取焦点时（onfocus）- - -判断输入框的value值是否是默认值，如果是默认值初始值，将value改为空，默认初始值就没有了，可以输入自己的
当时去焦点时（onblur）- - -判断输入框的value值是否没有值，没有的话，给value赋值默认值，未输入内容移开后又会显示默认值了
3、还可以给获取焦点和失去焦点两种状态的文字颜色设置不同，让两种状态区分的更明显
示例1:
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取/失去焦点</title>
<style>
input {
color: #ccc;
outline: none;
}
</style>
</head>
<body>
<input type="text" value="手机">
<script>
var text = document.querySelector('input');
text.onfocus = function() {
if (this.value === '手机') {
this.value = '';
}
this.style.color = '#333';
}
text.onblur = function() {
if (this.value === '') {
this.value = '手机';
}
this.style.color = '#ccc';
}
</script>
</body>
</html>
页面效果：
示例2
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户名 显示 隐藏</title>
<style>
input {
font-size: 14px;
color: #999;
outline: none;
padding: 3px 0 3px 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<!--用户名 显示隐藏内容 -->
<input type="text" value="邮箱/ID/手机号" class="userName">
<script>
var userName = document.querySelector('.userName');
userName.onfocus = function() {
if (this.value === '邮箱/ID/手机号') {
this.value = '';
this.style.borderColor = 'pink';
} else {
this.style.borderColor = 'pink';
this.style.color = '#999';
}
}
userName.onblur = function() {
if (this.value === '') {
this.value = '邮箱/ID/手机号';
this.style.borderColor = '#ccc';
this.style.color = '#999';
} else {
this.style.borderColor = '#ccc';
this.style.color = '#333';
}
}
</script>
</body>
</html>
页面效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
前端开发中，我们通常需要对比两个数组对象的差异。这其中有很多种方法，但是有些方法会带来一些问题，所以本文为大家准备了一个高效方法，需要的可以参考一下2023-05-05
javascript中JSON对象与JSON字符串相互转换实例
这篇文章主要介绍了javascript中JSON对象与JSON字符串相互转换,实例分析了json对象与字符串常用的几种转换技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了JavaScript类的继承操作,结合实例形式总结分析了JavaScript面向对象程序设计中类的继承常见实现方式与操作技巧,需要的朋友可以参考下2018-12-12
本篇文章通过一张详细的JavaScript中Object基础内部方法图介绍了其基本用法，需要的朋友参考下。2018-02-02
这篇文章主要为大家详细介绍了JavaScript实现简单钟表时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了gulp构建小程序的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
IE不出现Flash激活框的小发现的js实现方法...2007-09-09
这篇文章主要介绍了JS中parseInt()和map()用法,结合实例形式分析了parseInt()和map()方法的功能、参数、具体用法与相关注意事项,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了微信小程序实现电子签名，并导出图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
最近遇到一个小程序的开发需求,直接可以通过小程序就记录运动轨迹,所以这篇文章主要给大家介绍了关于微信小程序记录用户移动轨迹的相关资料,需要的朋友可以参考下2021-08-08
最新评论