HTML 5 <input> placeholder 属性兼容性解决办法

最新推荐文章于 2024-05-24 17:42:14 发布

一喵呜

最新推荐文章于 2024-05-24 17:42:14 发布

阅读量5.5k

点赞数

分类专栏： HTMl5 文章标签： HTML5自由者黄艺斌 placeholder HTML5兼容新标签

本文链接：https://blog.csdn.net/html5_/article/details/37902815

版权

HTMl5 专栏收录该内容

81 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>跨浏览器placehoder</title>
    <style>
        body{ font:12px/1.5 'simsun';}
        form{ width:300px; height:260px; margin:20px auto 0;}
        h3{ font-weight:bold; margin:10px 0;}
        p{ margin-bottom:10px;}
        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;}
		.wrap-statistics{ visibility:hidden;}
    </style>
</head>
<body>
<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>
<form id="form2">
    <h3>通过value方式模拟placeholder</h3>
    <p><label for="username2">用户名:</label><input type="text" name="username1" id="username2" placeholder="请输入用户名" value="" required></p>
    <p><label for="address2">地　址:</label><input type="text" name="address1" id="address2" placeholder="请输入地址" value="" required></p>
    <p><label for="remarks2">备　注:</label><textarea placeholder="请输入备注" id="remarks2"></textarea></p>
</form>
<script>
    var oForm1 = document.getElementById('form1');
    var oForm1Inputs = oForm1.getElementsByTagName('input');
    for(var i=0;i<oForm1Inputs.length;i++){
        placeHolder(oForm1Inputs[i],true);
    }
    var oForm1Textarea = oForm1.getElementsByTagName('textarea')[0];
    placeHolder(oForm1Textarea,true);

    var oForm2 = document.getElementById('form2');
    var oForm2Inputs = oForm2.getElementsByTagName('input');
    for(var i=0;i<oForm2Inputs.length;i++){
        placeHolder(oForm2Inputs[i]);
    }
    var oForm2Textarea = oForm2.getElementsByTagName('textarea')[0];
    placeHolder(oForm2Textarea);

    /**
     * @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 = obj.getAttribute('placeholder');
            if (!imitateMode) {
                obj.onfocus = function () {
                    (obj.value == defaultValue) && (obj.value = '');
                    obj.style.color = '';
                }
                obj.onblur = function () {
                    if (obj.value == defaultValue) {
                        obj.style.color = '';
                    } else if (obj.value == '') {
                        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;
                }
            }
        }
    }
</div>
</body>
</html>

一喵呜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML 5 <input> placeholder 属性兼容性解决办法

跨浏览器placehoder body{ font:12px/1.5 'simsun';} form{ width:300px; height:260px; margin:20px auto 0;} h3{ font-weight:bold; margin:10px 0;}
复制链接

扫一扫

专栏目录