由于版面限制,简单说下,详细的内容及在线预览、预览版压缩包,见这里
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);