以下代码在IE6-9里效果与chrome和FF效果一样。
值更改时placeholder隐藏
/* * jQuery placeholder * Fix for Html Input placeholder attribute in IE(6,7,8,9) * @author Kong * @Time 2015-02-13 * * 使用方法 JPlaceHolder.init(); * */ var JPlaceHolder = { //Check if the browser supports placeholder attribute check: function () { return ‘placeholder‘ in document.createElement(‘input‘); }, //initLoad init: function () { if (!this.check()) { this.fix(); } }, //fix fix: function () { jQuery(‘input[placeholder]‘).each(function () { var input = $(this) var placeholder = input.attr(‘placeholder‘); //It was createed,need to return if (input.parent().find("lable").html() != undefined) { return; } input.wrap($(‘<div></div>‘).css({ ‘position‘: ‘relative‘, ‘zoom‘: ‘1‘, ‘border‘: ‘none‘, ‘background‘: ‘none‘, ‘padding‘: ‘none‘, ‘margin‘: ‘none‘ })); var position = input.position(); var holder = $(‘<lable></lable>‘).text(placeholder).css({ ‘position‘: ‘absolute‘, ‘left‘: position.left, ‘top‘: position.top, ‘margin-left‘:‘7px‘, ‘color‘: ‘#aaa‘ }).appendTo(input.parent()); holder.click(function () { input.focus(); }); //propertychange attribute support IE9 input.die("input propertychange").live("input propertychange", function () { //input value has change holder.hide(); }).keyup(function (e) { if (e.keyCode == 8 && $.trim(input.val()).length == 0) { holder.show(); } }).blur(function () { input.val(delTag(input.val())); if (!input.val()) { holder.show(); } }); }); } }; //附带去除空格和html标签 //不需要此方法的时候请删除本文档的第61行 function delTag(str) { var str = str.replace(/<\/?[^>]*>/gim, "");//去掉所有的html标记 var result = str.replace(/(^\s+)|(\s+$)/g, "");//去掉前后空格 return result.replace(/\s/g, "");//去除文章中间空格 }
注:IE下如果使用了脚本动态加载input,需要在加载后运行事件。
时间: 2024-12-08 10:57:24