placeholder插件详解

placeholder插件是用来实现input或者textarea文本框显示默认文字的功能，当得到焦点时，默认文字消失。用户按删除键，把输入的字符删除掉，并失去焦点时，默认文字又出现等功能。使用此插件，只须要$("input").placeholder();这input元素，必须有placeholder属性，属性值就是input默认显示的文本，并且input元素中的class属性值中没有placeholder值，此插件也是基于jQuery的。

再看源码以前，我先讲一个知识点：

若是咱们直接用 .click() / .bind('click') 加上 .unbind('click') 来进行重复绑定，被 unbind 掉的将是绑定在元素上的全部click处理函数，潜在会影响到该元素在其余第三方的行为（好比，有另一个插件也绑定了该元素的click事件）。固然若是在bind的时候是显式定义了function的名字的话，能够在unbind的时候提供function的名字做为第二个参数unbind其中一个处理函数，但实际应用中咱们极可能会碰到各类进行匿名函数绑定的状况。

对于这种问题，jQuery的解决方案是使用事件绑定的命名空间。即在事件名称后添加 .something 来区分本身这部分行为逻辑范围。
好比用 .bind('click.myCustomRoutine',function(){...}); 一样是把匿名函数绑定到 click 事件（你能够用本身的命名空间屡次绑定不一样的匿名处理函数上去），当unbind的时候用 .unbind('click.myCustomRoutine') 便可释放全部绑定到 .myCustomRoutine 命名空间的 click 事件，而不会解除其余经过 .bind('click') 或另外的命名空间所绑定的click事件处理函数。
同时，使用命令空间还可让你一次性 unbind 全部此命名空间下的事件绑定，经过 .unbind('.myCustomRoutine') 便可。
要注意的是，jQuery的命名空间并不支持多级空间。所以在jQuery里面，若是用 .unbind('click.myCustomRoutine.myCustomSubone') ，解除的是命名空间分别为 myCustomRoutine 和 myCustomSubone 的两个并列命名空间下的全部 click 事件，而不是 "myCustomRoutine 下的 myCustomSubone 子空间"。

接下来咱们来看源码：

var isInputSupported = 'placeholder' in document.createElement('input');   //看此浏览器的input是否默认支持placeholder属性，IE6-9不支持
var isTextareaSupported = 'placeholder' in document.createElement('textarea');  
var prototype = $.fn;   //jQuery的原型对象
var valHooks = $.valHooks;   //解决浏览器兼容性的对象，它里面有不少属性，好比：option，select，radio，checkbox，这些属性是一个对象，具备set或get方法来解决浏览器兼容性问题。jQuery中针对这4个元素的value值进行了兼容性处理。
var hooks;
var placeholder;

if (isInputSupported && isTextareaSupported) {  //若是浏览器默认支持，就直接在jQuery的原型对象中添加placeholder方法，这样jQuery对象均可以调用placeholder方法了

　　placeholder = prototype.placeholder = function() {
　　　　return this;    //this其实指的就是jQuery对象，$("input")
　　};

　　placeholder.input = placeholder.textarea = true;  //给placeholder方法添加两个属性，属性值都为true

} else {

　　placeholder = prototype.placeholder = function() {
　　　　var $this = this;
　　　　$this.filter(

　　　　　　(isInputSupported ? 'textarea' : ':input') + '[placeholder]'   //若是支持input的palceholder，就是textarea[placeholder]，若是不支持，就是:input[placeholder]。过滤出这些元素进行下一步操做，这些元素多是有placeholder属性的textarea元素，也有多是有placeholder属性的表单元素（:input选择器选取表单元素）。

　　　　).not('.placeholder').bind(    //删除class属性值中有placeholder的元素

　　　　　　{
　　　　　　　　'focus.placeholder': clearPlaceholder,    //绑定focus和blur事件，命名空间为placeholder，方便unbind解绑时，使用。
　　　　　　　　'blur.placeholder': setPlaceholder
　　　　　　}

　　　　).data('placeholder-enabled', true)   //给这些元素在缓存系统中添加placeholder-enabled为true的数据

　　　　.trigger('blur.placeholder');   //触发blur.placeholder事件，执行setPlaceholder方法。也就是默认状况下，鼠标焦点不在input框中，所以触发input的blur事件
　　　　return $this;
　　};

　　placeholder.input = isInputSupported;
　　placeholder.textarea = isTextareaSupported;

　　hooks = {    //定义局部变量hooks 

　　　　'set': function(element, value) {   //若是是针对密码框设置placeholder，那么这里的element就是新的input元素，若是针对的是普通的input框，那么这里的element就是这个普通的input元素，这里的value是默认文本
　　　　　　var $element = $(element);

　　　　　　var $passwordInput = $element.data('placeholder-password');   //若是是密码框，那么新的input的placeholder-password值就是密码框对象，若是是普通的input元素，这里返回undefined。
　　　　　　if ($passwordInput) {
　　　　　　　　$passwordInput[0].value = value;   //设置密码框的value值
　　　　　　}

　　　　　　if (!$element.data('placeholder-enabled')) {   //若是是普通的input元素，$element.data('placeholder-enabled')返回true，取反后会返回false，所以不会进入if语句。
　　　　　　　　return element.value = value;
　　　　　　}
　　　　　　element.value = value;
　　　　　　return $element;
　　　　}
　　};

　　if (!isInputSupported) {   //若是浏览器不支持input的placeholder事件，就进入if语句
　　　　valHooks.input = hooks;         //给jQuery添加input属性对象，来解决浏览器input元素设置值与取值的兼容性问题，本来valHooks只有radio，checkbox，select，option这四个属性，如今多了input。
　　}
　　if (!isTextareaSupported) {   //若是不支持textarea的placeholder事件，就进入if语句
　　　　valHooks.textarea = hooks;  //针对textarea元素设置值与取值的兼容性问题的解决
　　}

}

function args(elem) {    //elem是input元素，针对IE6-7
　　var newAttrs = {};
　　var rinlinejQuery = /^jQuery\d+$/;
　　$.each(elem.attributes, function(i, attr) {    //取input元素的attributes属性对象
　　　　if (attr.specified && !rinlinejQuery.test(attr.name)) {   //若是属性值是被用户显式设置的，那么它的specified就会为true，而后判断属性名不是jQuery的自定义属性（在元素上调用data方法，往jQuery缓存系统中添加数据时，会在元素上添加一个以jQuery开头+随机数的一个自定义属性）
　　　　　　newAttrs[attr.name] = attr.value;      //把这些显式设置的属性值，保存到一个json对象中，并返回。
　　　　}
　　});
　　return newAttrs;
}

function clearPlaceholder(event, value) {   //当鼠标焦点在input元素上时

　　var input = this;
　　var $input = $(input);
　　if (input.value == $input.attr('placeholder') && $input.hasClass('placeholder')) {  //若是input的文本是默认文本，而且class属性中有placeholder值时，进入if语句，若是用户在input中输入默认的文本，而后触发blur事件，这时会把input的placeholder类删掉，所以当你再次触发focus事件时，不会进入if语句
　　　　if ($input.data('placeholder-password')) {    //若是是密码框，这里的input实际上是inputNew，由于input已经被hide了。
　　　　　　$input = $input.hide().next().show().attr('id', $input.removeAttr('id').data('placeholder-id')); //把inputNew隐藏，取到input元素，显示出来，并恢复input元素的id。同时移除inputNew的id，并取得inputNew的缓存系统中placeholder-id的值（这个值就是以前input元素id的值），赋给input元素的id。
　　　　　　$input.focus();  //input元素得到焦点（这时的input就是密码框的input了）
　　　　} else {   //若是不是密码框
　　　　　　input.value = "";   //就把input中的文本清空
　　　　　　$input.removeClass('placeholder');   //并移除掉这个placeholder类
　　　　　　input == safeActiveElement() && input.select();   //解决IE9下的一个bug，由于IE9下，若是是iframe中的元素得到了焦点，你调用document.activeElement，IE9会抛出错误。所以必须用try，catch来处理下，若是抛出错误，就不执行元素的select方法（此方法会选择input框中的文本），若是没抛出错误，就执行input的select方法（返回值是undefined）.
　　　　}
　　}
}

function setPlaceholder() {   //失去焦点触发blur事件
　　var $replacement;
　　var input = this;   //this指的就是input元素
　　var $input = $(input);  //转换成jQuery对象
　　var id = this.id;   //取到input元素的id

　　if (input.value == "") {  //若是input框中是空字符串
　　　　if (input.type == 'password') {   //若是input是密码输入框
　　　　　　if (!$input.data('placeholder-textinput')) { //input元素在jQuery缓存系统中是否有placeholder-textinput属性值，没有就进入if语句
　　　　　　　　try {
　　　　　　　　　　$replacement = $input.clone().attr({ 'type': 'text' }); //克隆一个input元素，咱们命名为inputNew，并设置它的type属性为text。IE老版本会报错，不能修改克隆出来的input的type值
　　　　　　　　} catch(e) {
　　　　　　　　　　$replacement = $('<input>').attr($.extend(args(this), { 'type': 'text' }));  //把这个input元素全部显式设置的属性取出来，而后扩展type属性。而后把这些属性所有赋值到新建立的input元素中，咱们命名为inputNew
　　　　　　　　}
　　　　　　　　$replacement.removeAttr('name').data({    //移除掉inputNew元素的name属性，并往jQuery数据缓存系统中添加数据
　　　　　　　　　　'placeholder-password': $input, 
　　　　　　　　　　'placeholder-id': id
　　　　　　　　}).bind('focus.placeholder', clearPlaceholder);    //给这个inputNew元素绑定focus事件。
　　　　　　　　$input.data({     //给input元素往jQuery缓存系统中添加数据
　　　　　　　　　　'placeholder-textinput': $replacement,
　　　　　　　　　　'placeholder-id': id
　　　　　　　　}).before($replacement);   //在元素input前面添加inputNew元素
　　　　　　}
　　　　　　$input = $input.removeAttr('id').hide().prev().attr('id', id).show();  //移除input元素的id属性，并隐藏，得到input元素前面的那个元素，也就是inputNew元素，而后设置它的id，并让它显示出来。
　　　　}
　　　　$input.addClass('placeholder');   //若是原来的input是密码框，这里的input就是inputNew，若是不是密码框，这里就是原来的input。
　　　　$input.val($input.attr('placeholder'));  //这里，若是浏览器的input或者textarea不支持placeholder事件，将调用上面定义的hooks来设置value值。具体请看hook的set方法。这里为何要新建一个新的input元素，是由于页面上的input元素是密码框，当你输入文本进去时，会显示***这种字符，可是默认状况下，应该显示默认文本，所以建立一个新的input元素，把密码框隐藏，而后把默认文本放在新的input元素里面。当用户用鼠标去点击时，新的input得到焦点时，就会把新的input元素隐藏，同时让密码框显示出来，这样用户输入的字符就会是***这种，若是不新建一个新的input，那么默认文本在密码框中显示的是***。
　　} else {   //若是input的value值不为""，就移除input的placeholder类名
　　　　$input.removeClass('placeholder');
　　}
}

function safeActiveElement() {
　　try {
　　　　return document.activeElement;  //http://bugs.jquery.com/ticket/13378
　　} catch (exception) {}
}

 

 

 

加油！