jquery 小插件,完成“输入字段预期值的提示信息”,防html5 placeholder属性
前言:在很多时候,我们需要文本框中显示默认值,获取焦点时,文字框中就会清空给的值,当失去焦点时,如果没有值,继续显示默认的文字,如果有输入值,就显示输入的值。现在项目中需要用到这个地方的功能比较多,于是想到了HTML5中的placeholder属性,但是总所周知,IE是咋们程序员心中的硬伤,不得不放弃。又不想在网上找这类似的,索性就自己写了一个,现在分享出来,供大家参考! |
下面是插件的主要代码:
(function ($) {
$.fn.Placeholder = function (param) {
var defaults = {
defaultval: 'data-defaultval', // <input type="text" data-defaultval="文字说嘛" />
defaultClass: 'default_text_auto', // 样式名称
tipstext: '', // 默认提示文本,如果为空则或者defaultval的值,反之
focusClass: "block"
}
var $this = $(this); var options = $.extend(defaults, param);
var defaultval = options.tipstext == "" ? $this.attr(options.defaultval) : options.tipstext;
if (defaultval != "" && $this.val() == "") {
// 追加文字样式
$this.addClass(options.defaultClass);
// 赋值
$this.val(defaultval); // 添加焦点事件
$this.focus(function () {
if ($(this).val() == defaultval) {
$(this).val("");
// 移除样式
$this.removeClass(options.defaultClass);
$this.addClass(options.focusClass);
}
// 添加移开焦点事件
}).blur(function () {
if ($(this).val() == "" || $(this).val() == defaultval) {
// 赋值
$(this).val(defaultval);
// 追加文字样式
$this.addClass(options.defaultClass);
$this.removeClass(options.focusClass);
}
});
} else {
$this.addClass(options.focusClass);
}
}
})(jQuery);
这里是相关的的样式
.default_placeholder{color: #C8C8C8;}
.jp_focus {color:black;}
代码很简单,调用也很简单的:placeholder
/**
*
* 使用方法
* 最简单的调用方式
* $("#").Placeholder();
* $(".").Placeholder();
* $("input[type='值']").Placeholder();
*
*
*一般调用形式
* $("").Placeholder({
* placeholder: 'data-val',
* defaultClass: "class",
* tips: '测试文字'
* });
*/
这里是html代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.8.2.min.js"></script>
<link href="js/jquery.placeholder/jquery.placeholder.css" rel="stylesheet" />
<script src="js/jquery.placeholder/jquery.placeholder-1.0.0.js"></script>
<script type="text/javascript">
$(function () {
// 默认
$("#txt1").Placeholder(); // 自定义提示信息
$("#txt2").Placeholder({ tips: "随便输入点东西吧!" }); // 自定义data-placeholder
$("#txt3").Placeholder({ placeholder: "data-p" }); // 初始化了value
$("#txt4").Placeholder();
});
</script>
</head>
<body>
<input id="txt1" data-placeholder="请输入一个文本" type="text" />
<input id="txt2" type="text" />
<input id="txt3" data-p="自定义data-placeholder" type="text" />
<input id="txt4" data-placeholder="请输入一个文本" value="(初始化了value)" type="text" />
</body>
</html>
效果图,不会做gif图片抱歉,谁有好的软件,介绍一下,谢谢!!!
jquery 小插件,完成“输入字段预期值的提示信息”,防html5 placeholder属性的更多相关文章
- 黑色半透明镂空遮罩指引效果实现jQuery小插件
/*! * by zhangxinxu(.com) 2017-05-18 * 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件 * 兼容到IE8+ * MIT使用协议,使用时候保留版权 ...
- 基于HTML5 audio元素播放声音jQuery小插件
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
XHTML 首先将jquery库和相关ui插件,以及css导入.一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异(最后注意ajax ...
- 一款jquery小插件:实现轻松获取和绑定编辑表单的值(带源码)
实现目的:通常在项目中,编辑页面在前后台需要一个一个框赋值,取值操作,小伙伴们普遍都会感觉繁琐,麻烦.: 实现思路:利用json对象化键值的思想: 好处:方便快速开发,提高开发效率,减少重复性代码: ...
- 自己写的自动生成动态边框的jquery小插件
思路就是在元素四周添加<ul>列表,然后周期性地改变它的颜色,实现动态的效果,不支持ie7.ie8 预览链接http://gorey.sinaapp.com/myBorder/border ...
- 学习写了一个点击按钮倒计时的jquery小插件
(function($) { $.fn.extend({ getSms: function(value) { value = $.extend({ wait: 60, //参数, 默认60秒 }, v ...
- 文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件
// 文本框文本域提示文字的自动显示与隐藏 (function($){ $.fn.textRemindAuto = function(options){ options = options || {} ...
- HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失
H5之前要实现这个功能还要用到JS,H5出来之后新增加了placeholder属性,有了这个属性就就能轻松实现这个功能. 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(h ...
- 浮动【电梯】或【回到顶部】小插件:iElevator.js
iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...
随机推荐
- 标准建立二叉树NEW
#include<iostream> #include<sstream> #include<stdio.h> #include<string> #inc ...
- poj 2771 最大独立集
这道题又无耻的抄袭了别人的代码. 刚开始以为是最大匹配,把条件不相符的人连一起,然后求最大匹配,感觉麻烦,然后看了别人的解题报告,是把相符的人连一起,然后减去,其实就是最大独立集. 最大独立集=|G| ...
- Properties读写资源文件
Java中读写资源文件最重要的类是Properties,功能大致如下: 1. 读写Properties文件 2. 读写XML文件 3. 不仅可以读写上述两类文件,还可以读写其它格式文件如txt等,只要 ...
- boa,thttp服务器安装,配置,测试
boa 1, SERVER_ROOT自定义,define.h头文件中,默认“/etc/boa" 2,./configure 3,修改CC,默认CC=gcc,make 4,error util ...
- STL容器的内存分配
这篇文章参考的是侯捷的<STL源码剖析>,所以主要介绍的是SGI STL实现版本,这个版本也是g++自带的版本,另外有J.Plauger实现版本对应的是cl自带的版本,他们都是基于HP实现 ...
- 如何查询Oracle性能监控
1.监控等待事件select event,sum(decode(wait_time,0,0,1)) prev, sum(decode(wait_time,0,1,0)) curr,count(*)fr ...
- Delphi在StatusBar上绘制ProgressBar
首先,在TForm的私有域,也就是private下设置两个变量ProgressBar.ProgressBarRect,其中ProgressBar为 TProgressBar类型,ProgressBar ...
- 两个DIV,左DIV宽度固定,右DIV自动填满剩余空间
<style type="text/css"> #main{ width:98%; } #sidebar{ float:left; width:200px; backg ...
- perl 解json数组
<pre name="code" class="cpp">http://11.36.10.82:4000/api/bus?bus=307&f ...
- 网易云课堂_C语言程序设计进阶_第七周:文件:文件访问、格式化输入输出、二进制输入输出
7.1文件 7.2底层操作 7.1文件 格式化的输入输出 printf %[flags][width][.prec][hIL]type Flag 含义 - 左对齐 + 在前面放+或- (space) ...