js模拟h5的placeholder

最新推荐文章于 2020-04-18 20:43:25 发布

原创最新推荐文章于 2020-04-18 20:43:25 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript来模拟HTML5中input元素的placeholder属性的方法，以解决浏览器兼容性问题。通过监听input元素的onfocus和onblur事件，实现占位符文字的显示与隐藏效果。

每天都在受兼容性折磨

js模拟h5的placeholder

html

 <input class="sortSearch_input" id="sortSearch_input" type="text" placeholder="请输入您要搜索的产品名称、品牌或型号" />

var funPlaceholder = function(element) {
    var placeholder = '';
    if (element && !("placeholder" in document.createElement("input")) && (placeholder = element.getAttribute("placeholder"))) {
        element.onfocus = function() {
           if (this.value === placeholder) {
               this.value = "";
        }
        this.style.color = '';
    };
    element.onblur = function() {
       if (this.value === "") {
           this.value = placeholder;
           this.style.color = 'graytext';
        }
    };

    //样式初始化
    if (element.value === "") {
        element.value = placeholder;
        element.style.color = 'graytext';
     }
  }
};

funPlaceholder(document.getElementById("sortSearch_input"));