标准兼容HTML5输入框提示信息的插件iHolder_v0.1.06.21.2014_预览版
由于版面限制,简单说下,详细的内容及在线预览、预览版压缩包,见这里
http://levi.cg.am/archives/3507
为什么说是标准兼容:
因为大多数placeholder插件是这样兼容的
点击输入框,提示信息消失;而离开输入框后,若文字为空,则展示提示信息
而这次我要实现的目的在于让IE6-9实现和chrome、firefox一样:
点击输入框后,提示信息不会立即消失,当敲下键盘按键的时候,提示信息消失;当删除文字内容为空的时候,展示提示信息
目前此插件为预览版,希望大家能够多多提意见,正式版,下周见
1. [代码][JavaScript]代码
;(function($) {
$(function() {
if ('placeholder' in document.createElement('input')) {
return this;
}
$(document).on('holder mousedown keydown keyup', 'input, textarea', function(e) {
var $this = $(e.target);
switch(e.type) {
case 'holder':
var tips = $this.attr('placeholder');
if (!tips.length) return false;
if (!$this.val().length) {
$this.val(tips).addClass('placeholder').data({'holder': 1, 'tips': tips});
} else {
$this.data({'holder': 0, 'tips': tips});
}
break;
case 'mousedown':
if (!!$this.data('holder')) {
var $pwd = $this.data('pwd'),
$inp = $this.clone().insertAfter($this).data({
'holder': 1,
'tips': $this.data('tips')
}).focus();
$pwd && $inp.data('pwd', $pwd) && $pwd.data('tar', $inp);
$this.remove();
return false;
}
case 'keydown':
if (!!$this.data('holder')) {
var $pwd = $this.data('pwd');
if (!$pwd) {
$this.val('').removeClass('placeholder').data('holder', 0);
} else {
$pwd.show().focus();
$this.hide();
}
}
break;
case 'keyup':
if (!$this.val().length && $this.data('holder') != undefined) {
var tips = $this.data('tips'), $tar = $this.data('tar'), _rel = (!$tar && !!tips);
(function(par) {http://www.enterdesk.com/special/shouhui/
this.val(tips).addClass('placeholder').data('holder', 1).show().trigger('mousedown');
!par && $this.hide();手绘图片
}).call(_rel ? $this : $tar, _rel);
}
break;
}
});
$('[placeholder]:password').each(function() {
var $this = $(this), tips = $this.attr('placeholder'), $inp;
if (tips.length) {
$inp = $('<input>', {
'type': 'text',
'class': $this.attr('class'),
'style': $this.attr('style'),
'placeholder': tips,
'rel': 'pwdholder'
}).insertAfter($this).data('pwd', $this);
$this.data({'tar': $inp, 'holder': 0, 'tips': tips});
($this.val().length ? $inp : $this)['hide']();
}
});
$('input, textarea').not(':radio, :checkbox, :hidden, :button, :submit,
:file, :password').filter('[placeholder]').trigger('holder');
});
})(jQuery);
标准兼容HTML5输入框提示信息的插件iHolder_v0.1.06.21.2014_预览版的更多相关文章
- HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...
- 发布 vscode 插件 Cnblogs Client For VSCode 预览版
为了方便大家使用 vscode 发布博文,我们做了一个小插件,今天发布预览版,欢迎大家试用并反馈问题与建议. 插件的英文名称是 Cnblogs Client For VSCode,简称是 vscode ...
- JQuery插件:图片上传本地预览插件,改进案例一则。
/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...
- 基于HTML5和JSP实现的图片Ajax上传和预览
本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...
- Vim安装插件支持 MarkDown 语法、实时预览等
使用 markdown-preview.vim 插件可以实时通过浏览器预览 markdown 文件 使用该插件需要 vim 支持py2/py3 安装 使用 vim-plug: 在 .vimrc 或 i ...
- vue项目使用vue-photo-preview插件实现点击图片放大预览和移动
官方链接: http://npm.taobao.org/package/vue-photo-preview # 安装 npm install vue-photo-preview --save # 引入 ...
- js图片预览插件,不涉及上传
小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...
- html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
随机推荐
- win下配置java环境变量
系统变量→新建 JAVA_HOME 变量 . 变量值填写jdk的安装目录(本人是 E:\Java\jdk1.7.0) 系统变量→寻找 Path 变量→编辑 在变量值最后输入 %JAVA_HOME%\ ...
- 【小程序】微信小程序开发实践
帐号相关流程 注册范围 企业 政府 媒体 其他组织 换句话讲就是不让个人开发者注册. :) 填写企业信息 不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的. 填写公司机构信 ...
- xshell容易断开的问题
修改服务器的sshd_config文件. http://bbs.51cto.com/thread-904289-1.html
- 使用Hadoop自己的类操作HDFS
package hdfs; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.I ...
- Node.app让Nodejs平台在iOS和OS X系统上奔跑
首先呢,欢迎大家去查看相同内容的链接:http://www.livyfeel.com/nodeapp/. 由于那个平台我用的markdown语法,我也懒得改动了,就这样黏贴过来了. 这是一个惊人的恐怖 ...
- Web安全系列(二):XSS 攻击进阶(初探 XSS Payload)
什么是 XSS Payload 上一章我谈到了 XSS 攻击的几种分类以及形成的攻击的原理,并举了一些浅显的例子,接下来,我就阐述什么叫做 XSS Payload 以及从攻击者的角度来初探 XSS 攻 ...
- TFT、LCD、OLED、LPTS、CRT等显示屏的区别
1.TFT TFT(Thin Film Transistor)是薄膜晶体管的缩写.TFT式显示屏是各类笔记本电脑和台式机上的主流显示设备,该类显示屏上的每个液晶像素点都是由集成在像素点后面的薄膜晶体管 ...
- MySql(六):影响 MySQL Server 性能的相关因素
MySQL 最多的使用场景是WEB 应用,那么我们就以一个WEB 应用系统为例,逐个分析其系统构成,进行经验总结,分析出数据库应用系统中各个环境对性能的影响. 一.商业需求对性能的影响 这里我们就拿一 ...
- redmine 自己定义字段mysql表结构
redmine能够创建自己定义字段,我经经常使用它来满足不同的管理需求.如今来解读一下.看看这些自己定义字段是怎样存在mysql表中的. 表issues 用来存放issue的标准字段. mysql&g ...
- grep命令:查看配置文件未注释行(转)
FROM: https://linux.cn/article-6958-1.html 可以使用 UNIX/BSD/OS X/Linux 这些操作系统自身提供的 grep,sed,awk,perl或者其 ...