兼容ie8的palceholder.js

PROMULGATOR

漫漫君颜

山东省临沂市

← jQuery滚动导航定位

→ Css蒙版弹窗实例

相关代码

兼容ie8的palceholder.js

Html

Css

Js

input {
	width:200px;
	height:30px;
	margin-bottom:10px;
	padding-left:5px;
	display:block;
	color:graytext;
}

function funPlaceholder(element) {
    //检测是否需要模拟placeholder
    var placeholder = '';
    if (element && !("placeholder" in document.createElement("input")) && (placeholder = element.getAttribute("placeholder"))) {
        //当前文本控件是否有id, 没有则创建
        var idLabel = element.id;
        if (!idLabel) {
            idLabel = "placeholder_" + new Date().getTime();
            element.id = idLabel;
        }
        //创建label元素
        var eleLabel = document.createElement("label");
        eleLabel.htmlFor = idLabel;
        eleLabel.style.position = "absolute";
        //根据文本框实际尺寸修改这里的margin值
        eleLabel.style.margin = "6px 0 0 5px";
        eleLabel.style.color = "graytext";
        eleLabel.style.cursor = "text";
        //插入创建的label元素节点
        element.parentNode.insertBefore(eleLabel, element);
        //事件
        element.onfocus = function() {
            eleLabel.innerHTML = "";
        };
        element.onblur = function() {
            if (this.value === "") {
                eleLabel.innerHTML = placeholder;
            }
        };
        //样式初始化
        if (element.value === "") {
            eleLabel.innerHTML = placeholder;
        }
    }
}
$.fn.placeholder = function() {
    return this.each(function() {
        funPlaceholder(this);
    });
}
$(function() {
    $('input[placeholder]').placeholder();
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3

立即下载

兼容ie8的palceholder.js

代码描述：兼容ie8的palceholder.js

直接引入palceholder.js即可

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>兼容ie8的palceholder.js-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号