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 学习笔记 选择器之六
Jul 23 Javascript
checkbox使用示例
Aug 23 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 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
5.PHP的其他功能
2006/10/09 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
php实现Session存储到Redis
2015/11/11 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
Js中sort()方法的用法
2006/11/04 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
javascript数组排序汇总
2015/07/07 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
2020/06/17 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
微信小程序实现购物车功能
2020/11/18 Javascript
Python中几种导入模块的方式总结
2017/04/27 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
final, finally, finalize的区别
2012/03/01 面试题
授权委托书范文
2014/07/31 职场文书
普通话演讲稿
2014/09/03 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
死亡证明书样本说明
2014/10/18 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
Python学习之os包使用教程详解
2022/03/21 Python