JS实现输入框提示文字点击时消失效果


Posted in Javascript onJuly 19, 2016

本文实例讲述了JS实现输入框提示文字点击时消失效果。分享给大家供大家参考,具体如下:

在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是“文本框点击时文字消失,失去焦点时文字出现”这个效果;这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码;自己会写JS的写写也快,不会写的就需要代码收集以作备用,用到的时候就方便多了。

下面就是这个效果实现用到的JS代码:

<script language="JavaScript" type="text/javascript">
  function addListener(element,e,fn){
    if(element.addEventListener){
       element.addEventListener(e,fn,false);
     } else {
       element.attachEvent("on" + e,fn);
     }
  }
  var myinput = document.getElementById("myinput");
  addListener(myinput,"click",function(){
  myinput.value = "";
  })
  addListener(myinput,"blur",function(){
  myinput.value = "请输入您的ID";
  })
</script>

只要把这段代码保存成一个JS文件就可以的,在网页里做好引用就OK,轻松的完成这个给不会程序的人看起来很难的效果。

Html代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charsetGB2312" />
 <title>文本框点击时文字消失,失去焦点时文字出现</title>
 </head>
 <body>
 <input type="text" value="请输入您的ID" id="myinput" />
 </body>
</html>
<script language="JavaScript" type="text/javascript">
  function addListener(element,e,fn){
    if(element.addEventListener){
       element.addEventListener(e,fn,false);
     } else {
       element.attachEvent("on" + e,fn);
     }
  }
  var myinput = document.getElementById("myinput");
  addListener(myinput,"click",function(){
  myinput.value = "";
  })
  addListener(myinput,"blur",function(){
  myinput.value = "请输入您的ID";
  })
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
window.js 主要包含了页面的一些操作
Dec 23 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
JS继承用法实例分析
Feb 05 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
详解vue高级特性
Jun 09 Javascript
JavaScript新增样式规则(推荐)
Jul 19 #Javascript
JavaScript动态添加css样式和script标签
Jul 19 #Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 #Javascript
js基于cookie记录来宾姓名的方法
Jul 19 #Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 #Javascript
使用plupload自定义参数实现多文件上传
Jul 19 #Javascript
artDialog+plupload实现多文件上传
Jul 19 #Javascript
You might like
初级的用php写的采集程序
2007/03/16 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
vue实现PC端录音功能的实例代码
2019/06/05 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
python列表与元组详解实例
2013/11/01 Python
python删除过期文件的方法
2015/05/29 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
先进集体事迹材料
2014/02/17 职场文书
成立公司计划书
2014/05/07 职场文书
保护环境倡议书500字
2014/05/19 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
学校捐书倡议书
2015/04/27 职场文书
遗失证明范文
2015/06/19 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
python中的None与NULL用法说明
2021/05/25 Python