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.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
layui table设置某一行的字体颜色方法
Sep 05 Javascript
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中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Python Collatz序列实现过程解析
2019/10/12 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
python和go语言的区别是什么
2020/07/20 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
C#的几个面试问题
2016/05/22 面试题
新闻专业应届生求职信
2013/10/31 职场文书
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
教师简历自我评价
2014/02/03 职场文书
寄语十八大感言
2014/02/07 职场文书
英文自荐信常用句子
2014/03/26 职场文书
师德模范事迹材料
2014/06/03 职场文书
生产车间标语
2014/06/11 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS