最近在做公司客户端的项目，是用IE浏览器解析的，而且是必须兼容到IE8，为了提高开发效率，兼容那最low的IE8，所以就写了个IEplaceholder.js插件，都是用纯原生js写的（发现网上都是jQuery写的，但是感觉原生的会轻便，而且也可以锻炼自己的js水平），IEplaceholder.js插件的源码如下：
/*
* 2019-3-7
* zhongxiaouyou
*
*解决placeholder在ie9及以下版本上无效的原生js(//兼容IE9及以下placeholder无效的bug)
*
* @nodes{所有input节点元素} 必填
* @pcolor{颜色} 选填
*
* */
function iePlaceholder(nodes,color) {
//仅在不支持 placeholder 的时候执行(ie9及以下)
if(nodes.length && !("placeholder" in document.createElement('input'))){
var pcolor;//默认颜色
if(pcolor){
pcolor = color;
}else{
pcolor = '#A4A4A4';//使用默认颜色
}
for(i=0;i<nodes.length;i++){
var self = nodes[i];
var inType = self.getAttribute("type") || 'text';
var placeholder;
//如果地址栏没获得值的情况下显示placeholder上的值
placeholder = self.getAttribute('placeholder') || '';
//没有传值的情况下，填充placeholder的值
if(!self.value){
//填充非password框
if(self.getAttribute("type")!="password"){
self.value = placeholder;
self.style.color = pcolor;
}else if(self.getAttribute("type")=="password"){
//对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换
var pwdVal = self.getAttribute('placeholder');
//在该密码框后新增input，并设置type为text以及其他属性样式
var newItem=document.createElement("input");
newItem.setAttribute("type","text");
newItem.setAttribute("class","newText");
newItem.setAttribute("value", pwdVal);
newItem.setAttribute("autocomplete","off");
newItem.style.cssText = "color: "+pcolor+";";
insertAfter(newItem, self);
//IE9使用nextElementSibling,而IE8使用nextSibling
nexts(self).style.display = "inline-block";
self.style.display = "none";
}
}
//点击获取焦点时消失
self.onfocus = function(){
var pValue = this.value;
var ph = this.getAttribute('placeholder');
var pT = this.getAttribute("type");
//非密码框
if(pValue == ph){
if(pT!='password'){
this.value = '';
}
}
//this是代替密码框的元素
if(this.getAttribute("class")=="newText"){
this.style.display = "none";
pres(this).style.display = "inline-block";
pres(this).focus();
}
}
//点击失去焦点时再判断显示
self.onblur = function(){
var pValue = this.value;
var ph = this.getAttribute('placeholder');
var pT = this.getAttribute("type");
//this是密码框元素
if(this.getAttribute("class")!="newText"){
var passType = this.getAttribute("type");
if(this.value == ''){
if(passType=='password'){
this.style.display = "none";
nexts(this).style.display = "inline-block";
}
}
}
if(pValue == ''){
if(pT!='password'){
this.value = ph;
}
}else{
this.style.color = pcolor;
}
}
}
}
}
//封装类似于jQuery里after()的函数,实现元素插入
function insertAfter(newElement, targetElement){
var parent = targetElement.parentNode;
if (parent.lastElementChild == targetElement) {
// 如果最后的节点是目标元素，则直接添加。因为默认是最后
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
//如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面
}
}
//封装使IE9兼容使用nextElementSibling,IE8使用nextSibling
function nexts(ele) {
if (typeof ele.nextElementSibling == 'object') {
return ele.nextElementSibling;
}
var n = ele.nextSibling;
while (n) {
if (n.nodeType == 1) {
return n;
}
n = n.nextSibling;
}
return n;
}
//封装使IE9兼容使用previousElementSibling,IE8使用previousSibling
function pres(ele) {
if (typeof ele.previousElementSibling == 'object') {
return ele.previousElementSibling;
}
var m = ele.previousSibling ;
while (m) {
if (m.nodeType == 1) {
return m;
}
m = m.previousSibling ;
}
return m;
}
然后直接在HTML页面引入IEplaceholder.js，并调入函数iePlaceholder(nodes，color)即可，需要注意的是，参数nodes为所有input节点元素（必填），color是设置placeholder的样式（选填）。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>让IE9及以下兼容placeholder</title>
<script src='https://gitee.com/zhongxiaoyou1314520/codes/ywofe2smr0aut9lgikjpv85/raw?blob_name=IEplaceholder.js'></script>
</head>
<body>
<form action="">
<input type="text" name="username" id="username" value="" placeholder="请输入用户名"/>
<input type="text" name="user" id="user" value="" placeholder="请输入昵称"/>
<input type="password" name="pass1" id="pass1" value="" placeholder="请输入密码"/>
<input type="password" name="pass2" id="pass2" value="" placeholder="请再次输入密码"/>
</form>
</body>
<script type="text/javascript" charset="UTF-8">
//使用插件
var nodes = document.getElementsByTagName("input");
iePlaceholder(nodes,"#585858");
</script>
</html>
因为第一次写插件，许多不足之处还请各位大神多多指教
网友评论