// 文本框文本域提示文字的自动显示与隐藏
(function($){
$.fn.textRemindAuto = function(options){
options = options || {};
var defaults = {
blurColor: "#999",
focusColor: "#333",
auto: true,
chgClass: ""
};
var settings = $.extend(defaults,options);
$(this).each(function(){
if(defaults.auto){
$(this).css("color",settings.blurColor);
}
var v = $.trim($(this).val());
if(v){
$(this).focus(function(){
if($.trim($(this).val()) === v){
$(this).val("");
}
$(this).css("color",settings.focusColor);
if(settings.chgClass){
$(this).toggleClass(settings.chgClass);
}
}).blur(function(){
if($.trim($(this).val()) === ""){
$(this).val(v);
}
$(this).css("color",settings.blurColor);
if(settings.chgClass){
$(this).toggleClass(settings.chgClass);
}
});
}
});
};
})(jQuery);

使用

使用很简单,方法是:textRemindAuto,最简单是使用类似下面代码:

$(".remindAuto").textRemindAuto();

参数
三个可控参数,一是默认的失去焦点的文字颜色,一个是文本框获得焦点时的文字颜色,还有一个就是切换显示的class,参见下面的实例:

$("#test").textRemindAuto({
blurColor: "green",
focusColor: "red",
chgClass: "change"
});

文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件的更多相关文章

  1. javascript 文字大小自动适应文本框 (文字大小自动调整)

    javascript 文字大小自动适应文本框 (文字大小自动调整) TOC 思考 思考一:面积法 思考二:微调法 代码 在进行类似微博墙之类的展示页面中,经常会遇到这样的需求:在固定大小的区域放入字数 ...

  2. 小tip:FireFox下文本框/域百分比padding bug解决——张鑫旭

    一.问题描述 我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况. 如下效果图: 在窄屏下,上面的文本框宽度也要跟着外部宽度变小. 难点对于文本框或者文本域,光标最好距离左侧边缘有 ...

  3. iOS不得姐项目--登录模块的布局,设置文本框占位文字颜色,自定义内部控件竖直排列的按钮

    一.登录模块的布局 将一整部分切割成若干部分来完成,如图分成了三部分来完成 设置顶部状态栏为白色的方法 二.设置文本框占位文字颜色 <1>方法一与方法二实现原理是同一种,都是通过设置pla ...

  4. .Net 文本框实现内容提示(仿Google、Baidu)

    原文:.Net 文本框实现内容提示(仿Google.Baidu) 1.Demo下载: 文本框实现内容提示(仿Google.Baidu).rar 2.创建数据库.表(我用的sqlserver2008数据 ...

  5. 在chrome下的文本框sendkeys,提示element can't focus--解决方法

    在chrome下的文本框sendkeys,提示element can't focus--解决方法(成都-半步流雲,群友解决) 成都-半步流雲1.升级你的chromedriver,2.降chrome版本 ...

  6. TextBox 文本框水印文字

    #region TextBox 文本框水印文字 /// <summary> /// 基于.NET 2.0的TextBox工具类 /// </summary> public st ...

  7. checkbox/input文本框与文字对齐

    3种方法都能实现checkbox文本框或radio文本框与文字对齐: <meta charset="utf-8"> <input style="vert ...

  8. 如何用html把文本框外观格式设为只显示底部的横线

    html把文本框外观格式设为只显示底部的横线 <style> input[type='text']{background:none;border:none;border-bottom:1p ...

  9. IOS NSNotificationCenter(通知 的使用)监听文本框的文字改变

    监听文本框的文字改变 * 一个文本输入框的文字发生改变时,文本输入框会发出一个UITextFieldTextDidChangeNotification通知 * 因此通过监听通知来监听文本输入框的文字改 ...

随机推荐

  1. Windows JDK 1.8降级为1.7方法

    转自:https://www.aliyun.com/jiaocheng/890626.html 正常情况下,JDK的升降级只需更改环境变量即可 可是到了1.8版本,Oracle使了一点小手段, 在系统 ...

  2. 警告框在asp.net mvc中应用

    Bootstrap与asp.net MVC框架结合,产生警告框.主要是利用控制器的TempData 字典对象 生成临时数据. ASP.NET MVC的TempData用于传输一些临时的数据,例如在各个 ...

  3. [浏览器美化]去除 Firefox 当前选中标签页顶端的线条

    Firefox 当前选中的标签页的最上方会显示有一条线,我觉得很丑,如图: 在地址栏输入 about:support ,然后点击打开目录. 在此目录中创建一个 chrome 文件夹(若没有),然后进入 ...

  4. 使用redis构建分布式锁

    Redis使用WATCH命令来代替对数据进行加锁,因为WATCH只会在数据被其他客户端抢先修改了的情况下通知执行了这个命令的客户端,但是不会阻止其他客户端对数据进行修改,所以这个命令被称为乐观锁. 但 ...

  5. Service官方教程(3)Bound Services

    Bound Services 1.In this document The Basics Creating a Bound Service Extending the Binder class Usi ...

  6. synchronized(4)修饰语句块之:synchronized(this)

    synchronized(this) 此时,线程获得的是对象锁.例如: public class Thread8 extends Thread { public void sync_fun() { s ...

  7. java数组实现买彩票(阿基老师的打乱排序思想)

    package com.wh.array; public class Lottery { public static void main(String[] args) { int[] num=new ...

  8. 安装11g 数据库

    出现问题解决: 1.首先确认下载的安装包完整性.2解压包的时候,按顺序解压,解压第一个包后,解压第二个包的时候,要把解压地址与解压第二包的地址要一样. 安装的时候,需要把两个压缩包都解压,并将目录wi ...

  9. 转 ORACLE-016:ora-01720 授权选项对于'xxxx'不存在

    报错的情形如下, A用户:视图V_A B用户:视图V_B,并且用到了V_A C用户:需要用V_B, 授权过程, A用户下: grant select on V_A to B B用户下: grant s ...

  10. Solr中的group与facet的区别 [转]

    Solr中的group与facet的区别 facet 自己理解就是分组聚合用的, 如下说明 http://blog.csdn.net/a925907195/article/details/472572 ...