placeholder在非标准(IE)浏览器的实现

题目写得好拗口啊:)

placeholder是HTML5的一个新特性,今天在考虑如何提示表单输入内容格式的时候,左思右想还是把提示内容放在input中最好。刚开始还不知道有placeholder这个东西,想要找一些js实现同样的效果,不久就发现原来HTML5中有placeholder这个标签属性,恰好支持这种效果。

高兴了没有一会,万恶的IE就把我拉回了现实。

方法就是比问题要多,找了N多用JS实现的placeholder的效果,最后发现一个相对完美的实现。

源码:

// HTML5 placeholder plugin version 1.01
// Copyright (c) 2010-The End of Time, Mike Taylor, http://miketaylr.com
// MIT Licensed: http://www.opensource.org/licenses/mit-license.php
//
// Enables cross-browser HTML5 placeholder for inputs, by first testing
// for a native implementation before building one.
//
//
// USAGE:
//$('input[placeholder]').placeholder();

//
(function($){
//feature detection
var hasPlaceholder = 'placeholder' in document.createElement('input');

//sniffy sniff sniff -- just to give extra left padding for the older
//graphics for type=email and type=url
var isOldOpera = $.browser.opera && $.browser.version < 10.5; $.fn.placeholder = function(options) { //merge in passed in options, if any var options = $.extend({}, $.fn.placeholder.defaults, options), //cache the original 'left' value, for use by Opera later o_left = options.placeholderCSS.left; //first test for native placeholder support before continuing //feature detection inspired by ye olde jquery 1.4 hawtness, with paul irish return (hasPlaceholder) ? this : this.each(function() { //TODO: if this element already has a placeholder, exit //local vars var $this = $(this), inputVal = $.trim($this.val()), inputWidth = $this.width(), inputHeight = $this.height(), //grab the inputs id for the

//stuff in some calculated values into the placeholderCSS object
options.placeholderCSS['width'] = inputWidth;
options.placeholderCSS['height'] = inputHeight;

// adjust position of placeholder
options.placeholderCSS.left = (isOldOpera && (this.type == 'email' || this.type == 'url')) ?
'11%' : o_left;
placeholder.css(options.placeholderCSS);

//place the placeholder
$this.wrap(options.inputWrapper);
$this.attr('id', inputId).after(placeholder);

//if the input isn't empty
if (inputVal){
placeholder.hide();
};

//hide placeholder on focus
$this.focus(function(){
if (!$.trim($this.val())){
placeholder.hide();
};
});

//show placeholder if the input is empty
$this.blur(function(){
if (!$.trim($this.val())){
placeholder.show();
};
});
});
};

//expose defaults
$.fn.placeholder.defaults = {
//you can pass in a custom wrapper
inputWrapper: '',

//more or less just emulating what webkit does here
//tweak to your hearts content
placeholderCSS: {
'font':'0.75em sans-serif',
'color':'#bababa',
'position': 'absolute',
'left':'5px',
'top':'3px',
'overflow-x': 'hidden'
}
};
})(jQuery);

源码:https://github.com/miketaylr/jQuery-html5-placeholder/blob/master/html5placeholder.jquery.js

placeholder在非标准(IE)浏览器的实现》上有1条评论

  1. Pingback引用通告: Web开发资源站 | Swind's Blog

发表评论

电子邮件地址不会被公开。 必填项已用*标注