您的位置:首页 > Web前端 > HTML5

HTML5属性placeholder,支持IE6、7、8浏览器

2016-07-06 16:33 567 查看
(function($) {

/**

* 向洁

* 2016/7/6 15:12

*/

var placeholderfriend = {

focus: function(s) {

s = $(s).hide().prev().show().focus();

var idValue = s.attr("id");

if (idValue) {

s.attr("id", idValue.replace("placeholderfriend", ""));

}

var clsValue = s.attr("class");

if (clsValue) {

s.attr("class", clsValue.replace("placeholderfriend", ""));

}

}

}

//判断是否支持placeholder

function isPlaceholer() {

var input = document.createElement('input');

return "placeholder" in input;

}

//不支持的代码

if (!isPlaceholer()) {

$(function() {

var form = $(this);

//遍历所有文本框,添加placeholder模拟事件

var elements = form.find("input[type='text'][placeholder]");

elements.each(function() {

var s = $(this);

var pValue = s.attr("placeholder");

var sValue = s.val();

if (pValue) {

if (sValue == '') {

s.val(pValue);

}

}

});

elements.focus(function() {

var s = $(this);

var pValue = s.attr("placeholder");

var sValue = s.val();

if (sValue && pValue) {

if (sValue == pValue) {

s.val('');

}

}

});

elements.blur(function() {

var s = $(this);

var pValue = s.attr("placeholder");

var sValue = s.val();

if (!sValue) {

s.val(pValue);

}

});

//遍历所有密码框,添加placeholder模拟事件

var elementsPass = form.find("input[type='password'][placeholder]");

elementsPass.each(function(i) {

var s = $(this);

var pValue = s.attr("placeholder");

var sValue = s.val();

if (pValue) {

if (sValue == '') {

//DOM不支持type的修改,需要复制密码框属性,生成新的DOM

var html = this.outerHTML || "";

html = html.replace(/\s*type=(['"])?password\1/gi, " type=text placeholderfriend")

.replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi, " ")

.replace(/\s*placeholderfriend/, " placeholderfriend value='" + pValue

+ "' " + "onfocus='placeholderfriendfocus(this);' ");

var idValue = s.attr("id");

if (idValue) {

s.attr("id", idValue + "placeholderfriend");

}

var clsValue = s.attr("class");

if (clsValue) {

s.attr("class", clsValue + "placeholderfriend");

}

s.hide();

s.after(html);

}

}

});

elementsPass.blur(function() {

var s = $(this);

var sValue = s.val();

if (sValue == '') {

var idValue = s.attr("id");

if (idValue) {

s.attr("id", idValue + "placeholderfriend");

}

var clsValue = s.attr("class");

if (clsValue) {

s.attr("class", clsValue + "placeholderfriend");

}

s.hide().next().show();

}

});

});

}

window.placeholderfriendfocus = placeholderfriend.focus;

})(jQuery);

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  学习笔记 Java