文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件
// 文本框文本域提示文字的自动显示与隐藏
(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小插件的更多相关文章
- javascript 文字大小自动适应文本框 (文字大小自动调整)
javascript 文字大小自动适应文本框 (文字大小自动调整) TOC 思考 思考一:面积法 思考二:微调法 代码 在进行类似微博墙之类的展示页面中,经常会遇到这样的需求:在固定大小的区域放入字数 ...
- 小tip:FireFox下文本框/域百分比padding bug解决——张鑫旭
一.问题描述 我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况. 如下效果图: 在窄屏下,上面的文本框宽度也要跟着外部宽度变小. 难点对于文本框或者文本域,光标最好距离左侧边缘有 ...
- iOS不得姐项目--登录模块的布局,设置文本框占位文字颜色,自定义内部控件竖直排列的按钮
一.登录模块的布局 将一整部分切割成若干部分来完成,如图分成了三部分来完成 设置顶部状态栏为白色的方法 二.设置文本框占位文字颜色 <1>方法一与方法二实现原理是同一种,都是通过设置pla ...
- .Net 文本框实现内容提示(仿Google、Baidu)
原文:.Net 文本框实现内容提示(仿Google.Baidu) 1.Demo下载: 文本框实现内容提示(仿Google.Baidu).rar 2.创建数据库.表(我用的sqlserver2008数据 ...
- 在chrome下的文本框sendkeys,提示element can't focus--解决方法
在chrome下的文本框sendkeys,提示element can't focus--解决方法(成都-半步流雲,群友解决) 成都-半步流雲1.升级你的chromedriver,2.降chrome版本 ...
- TextBox 文本框水印文字
#region TextBox 文本框水印文字 /// <summary> /// 基于.NET 2.0的TextBox工具类 /// </summary> public st ...
- checkbox/input文本框与文字对齐
3种方法都能实现checkbox文本框或radio文本框与文字对齐: <meta charset="utf-8"> <input style="vert ...
- 如何用html把文本框外观格式设为只显示底部的横线
html把文本框外观格式设为只显示底部的横线 <style> input[type='text']{background:none;border:none;border-bottom:1p ...
- IOS NSNotificationCenter(通知 的使用)监听文本框的文字改变
监听文本框的文字改变 * 一个文本输入框的文字发生改变时,文本输入框会发出一个UITextFieldTextDidChangeNotification通知 * 因此通过监听通知来监听文本输入框的文字改 ...
随机推荐
- WinPcap笔记2之获取已经安装设备的高级信息
1 主要数据结构定义 struct pcap_if//网络接口列表的一个节点 一个网络接口就是一个结点 方便链表 { struct pcap_if *next;//网络接口节点 ...
- IDE工具的[多行光标编辑模式]
Sublime Text3:Ctrl+Alt+上下键 Eclipse:Shift+Alt+A,进入退出多光标模式 IDEA:Shift + ctrl + alt + 鼠标左键 收集链接 IDEA:ht ...
- HDU4418:Time travel(高斯消元+期望)
传送门 题意 一个人在数轴上来回走,以pi的概率走i步i∈[1, m],给定n(数轴长度),m,e(终点),s(起点),d(方向),求从s走到e经过的点数期望 分析 设E[x]是人从x走到e经过点数的 ...
- bzoj 3308: 九月的咖啡店【最大费用最大流】
费用流里spfa最后的判断要写成dis[t]>=0而不是dis[t]!=-inf否则会WAWAWA-- #include<iostream> #include<cstdio&g ...
- P5089 [eJOI2018]元素周期表(并查集)
传送门 以后看到棋盘要么黑白染色要么二分图! 我们考虑对行列建二分图,如果\(i\)行\(j\)列有,就把\(i\)和\(j+n\)连起来 我们要让它变成一张完全二分图.考虑条件\((i_1,j_1+ ...
- hibernate简单实现连接数据库,并实现数据的操作
1:创建实体类 package com.yinfu.entity; public class User { private int id; private String username; priva ...
- Python unittest基本框架组成(1)
Python的标准库——unittest(可以实现自动化测试框架的搭建) python unittest四大组成“元件”: test fixture(测试脚手架)——测试代码的运行环境,指测试准备前和 ...
- CMake学习笔记四:usb_cam的CMakeLists解析
最近在学习cmake,在完整看了<cmake实践>一书后,跟着书上例程敲了跑了一遍,也写了几篇相关读书笔记,算是勉强基本入门了.所以找了usb_cam软件包的CMakeLists.txt来 ...
- ural1076 Trash 垃圾
Description You were just hired as CEO of the local junkyard.One of your jobs is dealing with the in ...
- [IOI1998]Picture
Description 在一个平面上放置一些矩形,所有的边都为垂直或水平.每个矩形可以被其它矩形部分或完全遮盖,所有矩形合并成区域的边界周长称为轮廓周长. 要求:计算轮廓周长. 数据规模: 0≤矩形数 ...