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 相关文章推荐
javascript 面向对象编程基础:封装
Aug 21 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 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
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
python多进程操作实例
2014/11/21 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
python在文本开头插入一行的实例
2018/05/02 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
python 实现批量图片识别并翻译
2020/11/02 Python
Python远程linux执行命令实现
2020/11/11 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
工程材料采购方案
2014/05/18 职场文书
中职招生先进个人材料
2014/08/31 职场文书
出差报告格式模板
2014/11/06 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
Python OpenCV形态学运算示例详解
2022/04/07 Python
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL