jQuery简单实现input文本框内灰色提示文本效果的方法


Posted in Javascript onDecember 02, 2015

本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法。分享给大家供大家参考,具体如下:

$(function(){  
  $(".grayTips").each(function(){ //遍历每个文本框
    var objTextBox=$(this);
    var oldText=$.trim(objTextBox.val());
    objTextBox.css("color","#888"); 
    objTextBox.focus(function(){
      if(objTextBox.val()!=oldText){
        objTextBox.css("color","#000");
      }
      else{
        objTextBox.val("").css("color","#888");
      }
    });
    objTextBox.blur(function(){
      if(objTextBox.val()==""){
        objTextBox.val(oldText).css("color","#888");
      }
    });
    objTextBox.keydown(function(){
      objTextBox.css("color","#000");
    });
  });
});

说明:需要引入jquery.js文件  input和TextBox都有效

$(function(){
 $(".grayTip").each(function(){
  var $input=$(this);
  $input.css("color","#888");
  var oldText=$.trim($input.val());
  $input.focus(function(){
  var newText=$.trim($input.val());
  if (newText==oldText){
   $input.val("");   
  }
  $input.css("color","#000");
  });
  $input.blur(function(){
  var newText=$.trim($input.val());
  if(newText==""){
   $input.val(oldText);
   $input.css("color","#888");
  }
  });
 }); 
});

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

Javascript 相关文章推荐
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
jquery实现简单文字提示效果
Dec 02 #Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 #Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 #Javascript
jqGrid中文文档之选项设置
Dec 02 #Javascript
javascript实现自动填写表单实例简析
Dec 02 #Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 #Javascript
纯js代码实现简单计算器
Dec 02 #Javascript
You might like
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
Javasipt:操作radio标签详解
2013/12/30 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
javascript this详细介绍
2016/09/19 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
用Python实现协同过滤的教程
2015/04/08 Python
python修改操作系统时间的方法
2015/05/18 Python
对Python 数组的切片操作详解
2018/07/02 Python
PyTorch中的Variable变量详解
2020/01/07 Python
python如何修改文件时间属性
2021/02/05 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
行政助理求职自荐信
2013/10/26 职场文书
医大实习自我鉴定
2013/12/07 职场文书
五型班组建设方案
2014/02/10 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
班主任2015新年寄语
2014/12/08 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
小程序实现文字循环滚动动画
2021/06/14 Javascript
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android