首页 > 代码库 > 跨浏览器的placeholder – 原生JS版

跨浏览器的placeholder – 原生JS版

2024-07-20 23:09:47   226人阅读

 

转自来源 ： http://www.ifrans.cn/placehoder/

 

跨浏览器的placeholder – 原生JS版

html5为input元素新增了一个属性”placeholder”，提供对输入字段预期值的提示信息，input为空且未获得焦点时显示，获得焦点时消失，非常实用。目前，大部分现代浏览器都对placeholder属性提供了支持，IE10也是支持的。如果需要使IE6~IE9等浏览器支持placeholder，只有借助js了。

在这些不支持原生placeholder属性的浏览器下，通常使用value值来模拟，如果input为空且未获得焦点，就把value值设置为placeholder属性的值，一旦获得焦点，则将该input的值清空。这种方式在一些情况下会有问题，比如type=”password”的input的value值是以星号显示的，无法直接显示文字，除非同时更改type类型。再如，会给表单验证带来麻烦，如果某input是必填的，那么提交表单的时候该input的value为空或者为placeholder值时都不应该被提交，所以我们要增加对value为placeholder的判断，或许这不是什么大问题，不过如果项目里使用了验证插件，而插件本身又不支持这种方式，还是会带来些麻烦的。我在前不久的项目中就遇到了这个问题。现在重写了placeholder函数，在支持传统的使用value模拟placeholder方式的同时，提供了一种插入一个覆盖在input上的span标签来模拟placeholder的方式，可供必要时选择。先上demo:

【点击这里查看 “跨浏览器的placeholder” DEMO】

下面是js代码主要部分，全部代码就不贴出了，可以查看demo页面的源码。稍后放出jquery插件版的。

主要JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/**
 * @name placeHolder
 * @class 跨浏览器placeHolder,对于不支持原生placeHolder的浏览器，通过value或插入span元素两种方案模拟
 * @param {Object} obj 要应用placeHolder的表单元素对象
 * @param {Boolean} span 是否采用悬浮的span元素方式来模拟placeHolder，默认值false,默认使用value方式模拟
 */
function placeHolder(obj, span) {
    if (!obj.getAttribute(‘placeholder‘)) return;
    var imitateMode = span === true ? true: false;
    var supportPlaceholder = ‘placeholder‘ in document.createElement(‘input‘);
    if (!supportPlaceholder) {
        var defaultValue = http://www.mamicode.com/obj.getAttribute(‘placeholder‘);
        if (!imitateMode) {
            obj.onfocus = function() { (obj.value =http://www.mamicode.com/= defaultValue) && (obj.value = ‘‘);
                obj.style.color = ‘‘;
            }
            obj.onblur = function() {
                if (obj.value =http://www.mamicode.com/= defaultValue) {
                    obj.style.color = ‘‘;
                } else if (obj.value =http://www.mamicode.com/= ‘‘) {
                    obj.value = http://www.mamicode.com/defaultValue;
                    obj.style.color = ‘#ACA899‘;
                }
            }
            obj.onblur();
        } else {
            var placeHolderCont = document.createTextNode(defaultValue);
            var oWrapper = document.createElement(‘span‘);
            oWrapper.style.cssText = ‘position:absolute; color:#ACA899; display:inline-block; overflow:hidden;‘;
            oWrapper.className = ‘wrap-placeholder‘;
            oWrapper.style.fontFamily = getStyle(obj, ‘fontFamily‘);
            oWrapper.style.fontSize = getStyle(obj, ‘fontSize‘);
            oWrapper.style.marginLeft = parseInt(getStyle(obj, ‘marginLeft‘)) ? parseInt(getStyle(obj, ‘marginLeft‘)) + 3 + ‘px‘: 3 + ‘px‘;
            oWrapper.style.marginTop = parseInt(getStyle(obj, ‘marginTop‘)) ? getStyle(obj, ‘marginTop‘) : 1 + ‘px‘;
            oWrapper.style.paddingLeft = getStyle(obj, ‘paddingLeft‘);
            oWrapper.style.width = obj.offsetWidth - parseInt(getStyle(obj, ‘marginLeft‘)) + ‘px‘;
            oWrapper.style.height = obj.offsetHeight + ‘px‘;
            oWrapper.style.lineHeight = obj.nodeName.toLowerCase() == ‘textarea‘ ? ‘‘: obj.offsetHeight + ‘px‘;
            oWrapper.appendChild(placeHolderCont);
            obj.parentNode.insertBefore(oWrapper, obj);
            oWrapper.onclick = function() {
                obj.focus();
            }
            //绑定input或onpropertychange事件
            if (typeof(obj.oninput) == ‘object‘) {
                obj.addEventListener("input", changeHandler, false);
            } else {
                obj.onpropertychange = changeHandler;
            }
            function changeHandler() {
                oWrapper.style.display = obj.value != ‘‘ ? ‘none‘: ‘inline-block‘;
            }
            /**
                 * @name getStyle
                 * @class 获取样式
                 * @param {Object} obj 要获取样式的对象
                 * @param {String} styleName 要获取的样式名
                 */
            function getStyle(obj, styleName) {
                var oStyle = null;
                if (obj.currentStyle) oStyle = obj.currentStyle[styleName];
                else if (window.getComputedStyle) oStyle = window.getComputedStyle(obj, null)[styleName];
                return oStyle;
            }
        }
    }
}

 

-----------------------------------------------------------------------------------------------

根据上面的东东， 简单的一个demo如下：

<!DOCTYPE html><html><head>    <meta charset="gb2312" />    <title>跨浏览器placehoder</title>    <meta name="author" content="ifrans.cn" />    <meta name="description" content="跨浏览器的placehoder原生js版,让ie也支持placehoder" />    <meta name="keywords" content="跨浏览器,placehoder,ie,原生js,表单" />    <script type="text/javascript" src="./placeholder.js" ></script>    <style>        input{ vertical-align:middle; margin-left:10px; height:24px; line-height:24px; width:200px; padding-left:2px; }        textarea{ vertical-align:middle; margin-left:10px; width:200px; height:50px; font:inherit; padding-left:2px;}    </style></head><body onload="initPlaceholder(‘form1‘)"><form id="form1">    <h3>在不支持placeholder的浏览器下，通过插入悬浮的span元素方式模拟</h3>    <p><label for="username1">用户名:</label><input type="text" name="username1" id="username1" placeholder="请输入用户名" value="" required></p>    <p><label for="password1">密　码:</label><input type="password" name="password1" id="password1" placeholder="请输入密码" value="" required></p>    <p><label for="address1">地　址:</label><input type="text" name="address1" id="address1" placeholder="请输入地址" value="" required></p>    <p><label for="remarks1">备　注:</label><textarea placeholder="请输入备注" id="remarks1"></textarea></p></form> </body></html>
/** * @name placeHolder * @class 跨浏览器placeHolder,对于不支持原生placeHolder的浏览器，通过value或插入span元素两种方案模拟 * @param {Object} obj 要应用placeHolder的表单元素对象 * @param {Boolean} span 是否采用悬浮的span元素方式来模拟placeHolder，默认值false,默认使用value方式模拟 */function placeHolder(obj, span) {    if (!obj.getAttribute(‘placeholder‘)) return;    var imitateMode = span===true?true:false;    var supportPlaceholder = ‘placeholder‘ in document.createElement(‘input‘);    if (!supportPlaceholder) {        var defaultValue = http://www.mamicode.com/obj.getAttribute(‘placeholder‘);        if (!imitateMode) {            obj.onfocus = function () {                (obj.value == defaultValue) && (obj.value = http://www.mamicode.com/‘‘);                obj.style.color = ‘‘;            }            obj.onblur = function () {                if (obj.value =http://www.mamicode.com/= defaultValue) {                    obj.style.color = ‘‘;                } else if (obj.value =http://www.mamicode.com/= ‘‘) {                    obj.value = defaultValue;                    obj.style.color = ‘#ACA899‘;                }            }            obj.onblur();        } else {            var placeHolderCont = document.createTextNode(defaultValue);            var oWrapper = document.createElement(‘span‘);            oWrapper.style.cssText = ‘position:absolute; color:#ACA899; display:inline-block; overflow:hidden;‘;            oWrapper.className = ‘wrap-placeholder‘;            oWrapper.style.fontFamily = getStyle(obj, ‘fontFamily‘);            oWrapper.style.fontSize = getStyle(obj, ‘fontSize‘);            oWrapper.style.marginLeft = parseInt(getStyle(obj, ‘marginLeft‘)) ? parseInt(getStyle(obj, ‘marginLeft‘)) + 3 + ‘px‘ : 3 + ‘px‘;            oWrapper.style.marginTop = parseInt(getStyle(obj, ‘marginTop‘)) ? getStyle(obj, ‘marginTop‘): 1 + ‘px‘;            oWrapper.style.paddingLeft = getStyle(obj, ‘paddingLeft‘);            oWrapper.style.width = obj.offsetWidth - parseInt(getStyle(obj, ‘marginLeft‘)) + ‘px‘;            oWrapper.style.height = obj.offsetHeight + ‘px‘;            oWrapper.style.lineHeight = obj.nodeName.toLowerCase()==‘textarea‘? ‘‘:obj.offsetHeight + ‘px‘;            oWrapper.appendChild(placeHolderCont);            obj.parentNode.insertBefore(oWrapper, obj);            oWrapper.onclick = function () {                obj.focus();            }            //绑定input或onpropertychange事件            if (typeof(obj.oninput)==‘object‘) {                obj.addEventListener("input", changeHandler, false);            } else {                obj.onpropertychange = changeHandler;            }            function changeHandler() {                oWrapper.style.display = obj.value != ‘‘ ? ‘none‘ : ‘inline-block‘;            }            /**             * @name getStyle             * @class 获取样式             * @param {Object} obj 要获取样式的对象             * @param {String} styleName 要获取的样式名             */            function getStyle(obj, styleName) {                var oStyle = null;                if (obj.currentStyle)                    oStyle = obj.currentStyle[styleName];                else if (window.getComputedStyle)                    oStyle = window.getComputedStyle(obj, null)[styleName];                return oStyle;            }        }    }}/** * 初始化， 对所有的input ，textarea应用. 在 body的onload中调用. */function initPlaceholder(formid, doc) {    if (!doc){ doc = document; }    var oForm1 = doc.getElementById(formid);    var oForm1Inputs = oForm1.getElementsByTagName(‘input‘);    for(var i=0;i<oForm1Inputs.length;i++){        placeHolder(oForm1Inputs[i],true);    }    var oForm1Textarea = oForm1.getElementsByTagName(‘textarea‘);    for(var i=0;i<oForm1Textarea.length;i++){        placeHolder(oForm1Textarea[i],true);    }}

 

 

跨浏览器的placeholder – 原生JS版


联系
我们