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>
页面效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript使表单中的内容显示在屏幕上的方法
本文实例讲述了JavaScript使表单中的内容显示在屏幕上的方法.分享给大家供大家参考.具体实现方法如下: 一.使内容水平出现 <html> <head> <title>测试</title> <script type="text/javascript"> function to() { var txt=document.getElementById("txt").value; document.getEl
-
基于JavaScript实现表单密码的隐藏和显示出来
为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢? 当用户输入时密码显示为圆点或者星号, 为了确保用户输入的正确, 用户可以点击让密码显示的按钮. 直接就先看节目效果. 界面结构, 一个外层的pass-box, 然后内层加入input 和 一个 i 标签, 且给他们加入相应的class名称. <div class="pass-box"> <input type=&qu
-
JS实现表单中checkbox对勾选中增加边框显示效果
本文实例讲述了JS实现表单中checkbox对勾选中增加边框显示效果.分享给大家供大家参考.具体如下: 这里用JavaScript实现checkbox复选框选中效果,表单中的复选框效果,打对勾选中效果模拟,JS与HTML5相结合实现的美化效果.貌似目前比较流行的效果啦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-checkbox-check-border-show-codes/ 具体代码如下: <!doctype html
-
js下在password表单内显示提示信息的解决办法
经典有人要这个代码,考虑到password中输入的内容会显示为*号,所以要想办法解决*的问题.当初想用setAttribute动态修改type属性达到效果,再ff下测试成功,但没想到setAttribute对type属性的修改在ie中无效.最终采用背景图片的方式解决了这个.即为password设定一个背景图片,图片文字为提示信息 如:<img src="http://files.jb51.net/upload/20070819124037566.gif" />, 当鼠标放上
-
JS实现表单中点击小眼睛显示隐藏密码框中的密码
领导交个一个任务,要求在表单中点击小眼睛显示隐藏密码框中的密码!在一些网站中经常会用到这样的功能,今天小编就给大家分享我的实现思路及代码 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 最终效果图 css样式部分,样式可根据自己喜好设置,没有过硬要求 <style> div:first-child { width: 300px; height: 50px; background-color: red; color: white; margin: 20px
-
JavaScript显示表单内元素数量的方法
本文实例讲述了JavaScript显示表单内元素数量的方法.分享给大家供大家参考.具体如下: JavaScript显示表单内元素的数量,不包含表单本身 <!DOCTYPE html> <html> <body> <form id="frm1" action="form_action.asp"> First name: <input type="text" name="fname&qu
-
JavaScript实现显示隐藏表单文字
本文实例为大家分享了JavaScript实现显示隐藏表单文字的具体代码,供大家参考,具体内容如下 实现思路 运用 onfocus.onblur 事件 onfocus- - -获取焦点(鼠标点击输入框,输入框里面有闪动的光标) onblur- - -失去焦点(鼠标不选中输入框,输入框里面失去闪动的光标) 1.给输入框设置一个默认值 2.获取输入框对象,给其绑定事件:onfocus 和 onblur 当获取焦点时(onfocus)- - -判断输入框的value值是否是默认值,如果是默认值初始值,将
-
jQuery实现根据类型自动显示和隐藏表单
jquery实现表单根据单选按钮进行字段的动画切换,昨天写的,感觉比起初学时写的js/jquery有了很大进步..在最大化扩展性的情况下经可能使代码精简. html 复制代码 代码如下: <div class="control-group"> <label class="control-label">类型:</label> <div class=
-
JavaScript常用的正则表达式表单验证代码
常用的正则表达式如下: 复制代码 代码如下: "^-?[1-9]\\d*$", //整数 "^[1-9]\\d*$", //正整数 "^-[1-9]\\d*$", //负整数 "^([+-]?)\\d*\\.?\\d+$", //数字 "^[1-9]\\d*|0$", //正数(正整数 + 0) "^-[1-9]\\d*|0$", //负数(负整数 + 0) "^([+-]?)
-
php通过隐藏表单控件获取到前两个页面的url
自己在学习过程中也遇到了类似的问题: 比如,后台是想做成这样子的: 但是实际则是这样的: 解决方法: 通过隐藏表单控件 <input type="hidden" name="prevurl" value="<?php echo $_SERVER['HTTP_REFERER']?>"> 这样$_SERVER['HTTP_REFERER']的值看上去就暂时存到了$_POST[prevurl]里. 其实这个方法的原理还是把上一个
-
JavaScript获取网页支持表单字符集的方法
本文实例讲述了JavaScript获取网页支持表单字符集的方法.分享给大家供大家参考.具体如下: JavaScript获取网页支持表单的字符集可通过表单的acceptCharset方法获得 <!DOCTYPE html> <html> <body> <form id="frm1" accept-charset="ISO-8859-1"> First name: <input type="text&quo
-
Ajax+FormData+javascript实现无刷新表单信息提交
原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单信息 1.静态显示页面代码 <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="t
-
JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f
-
javascript实现自动填写表单实例简析
本文实例讲述了javascript实现自动填写表单的方法.分享给大家供大家参考,具体如下: 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作,自动提交表单,轻松且高效. 步骤 1. 找到页面中对应的form,把form中所需的html控件列出来,如 <form name="customersForm" id="myform" method="
-
如何使用JavaScript策略模式校验表单
概述 Web项目中,登录,注册等等功能都需要表单提交,当把用户的数据提交给后台之前,前端一般要做一些力所能及的校验,比如是否填写,填写的长度,密码是否符合规范等等,前端校验可以避免提交不合规范的表单. 假如我们有一个表单,校验逻辑如下: 用户名不为空 密码长度不低于6位 手机号符合格式 未使用策略模式的表单校验 当没有使用策略模式时,即我们首先会想到的校验模式通常是这样的: <body> <form id="registerForm"> <label fo
-
javascript将异步校验表单改写为同步表单
同步表单校验的缺点 响应错误信息时,需要重新加载整个页面(虽然有缓存,客户端仍然需要通过http协议对比每个文件是否有更新,以保持文件最新) 服务器响应错误以后,用户之前所输入的信息全部丢失了,用户需要从头开始填写(部分浏览器帮我们缓存了这些数据) 异步校验表单的初衷 提升用户体验 最大化减少网络请求,减轻服务器压力 下面我们看一个常见的异步表单校验(校验工号在后台是否存在,存在为有效工号) 校验工号 复制代码 代码如下: var BASE_PATH = '${rc.contextPath}';