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 相关文章推荐
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
vue实现简单数据双向绑定
Apr 28 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
Syphon 使用方法
2021/03/03 冲泡冲煮
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
解析php类的注册与自动加载
2013/07/05 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
Python中的random()方法的使用介绍
2015/05/15 Python
python写入已存在的excel数据实例
2018/05/03 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
文明城市创建标语
2014/06/16 职场文书
篮球社团活动总结
2014/06/27 职场文书
应届生求职信范文
2014/06/30 职场文书
党员对照检查剖析材料
2014/10/13 职场文书