跨浏览器的placeholder

最新推荐文章于 2018-02-09 10:56:00 发布

最新推荐文章于 2018-02-09 10:56:00 发布 · 128 阅读

文章标签：

#placeholder #默认提示语 #跨浏览器placeholder

java web 同时被 2 个专栏收录

237 篇文章

订阅专栏

javascript

140 篇文章

订阅专栏

本文介绍了如何通过js代码实现跨浏览器的placeholder效果，并提供了HTML实例及参数说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何实现跨浏览器的placeholder效果呢?

先看下效果

js代码如下:

$('#username').placeholder({
        word: '用户名', color: '#ddd', normalFontColor: '#f00', maxLen: 4, minLen: 2, errorBorderClass: 'errorBorder',
        keyup_callback: function () {
            console.log('keyup_callback');
        }
    });
    $('#password').placeholder({word: '请输入密码', normalFontColor: '#f00', color: '#ddd'}, function () {
        console.log('callback');
    });

参数说明:

html实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>label左对齐</title>
    <style>
        ul, li {
            /*list-style: outside none none;*/
            list-style-type: none;
            margin-left: 0;
        }

        li label {
            width: 20%;
            float: left; /* It is necessary */
        }


        li.button {
            text-align: center;
            margin-left: -40px;
        }

        input.errorBorder {
            border: solid 1px #ff0000;
        }
    </style>
</head>
<body>
<form action="">
    <ul style="width: 400px">
        <li>
            <label for="username">用户名</label><input id="username" type="text"/> <span>用户名不能为空</span>
        </li>
        <li>
            <label for="password">密码</label><input id="password" type="text"/>
        </li>
        <li class="button">
            <input type="button" value="下一步"/>
        </li>
    </ul>
</form>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="common_util.js"></script>
<script type="text/javascript" src="jplaceholder.js"></script>
<script type="text/javascript">

    $('#username').placeholder({
        word: '用户名', color: '#ddd', normalFontColor: '#f00', maxLen: 5, minLen: 2, errorBorderClass: 'errorBorder',
        keyup_callback: function () {
            console.log('keyup_callback');
        },keydown_callback: function () {
            console.log('keydown...');
        }
    });
    $('#password').placeholder({word: '请输入密码', normalFontColor: '#f00', color: '#ddd'}, function () {
        console.log('callback');
    });



</script>
</body>
</html>

使用示例:

var $invoice_title = $('input[name=invoice_title]');
    $invoice_title.inputclean({
        inputClearClass: 'inputClearBtn',
        deviationTop: 0,
        parentHoverClass: 'inputParentLi',
        deviationLeft: 2
    });
    $invoice_title.placeholder({
        word: '请输入抬头信息',
        color: '#ddd',
        normalFontColor: '#000', /* maxLen: 4, minLen: 2,*/
        errorBorderClass: 'errorBorder',
        parentInputFocusClass: 'inputFocus',
        isAdapterInputclean: true
    });

    var $address_detail = $('input[name=address_detail]');
    $address_detail.inputclean({
        inputClearClass: 'inputClearBtn',
        deviationTop: 0,
        parentHoverClass: 'inputParentLi',
        deviationLeft: 2
    });
    $address_detail.placeholder({
        word: '请输入详细地址',
        color: '#ddd',
        normalFontColor: '#000', /* maxLen: 4, minLen: 2,*/
        errorBorderClass: 'errorBorder',
        parentInputFocusClass: 'inputFocus',
        isAdapterInputclean: true
    });

 $ChanjetNewCodeInput.placeholder({
                word: ERROR_MESSAGE_SMSCODE_PLEASE_INPUT,
                color: '#999',
                normalFontColor: '#333333',
                keyup_callback: CodeInputKeyUp,
                focus_callback: CodeInputKeyUp,
                blur_callback: function () {
                    checkSMSCode($ChanjetNewCodeInput, $newSMSCodeMsg, true)
                }
            });
            $ChanjetNewMobileInput.placeholder({
                word: '请输入11位有效手机号码',
                color: '#999',
                normalFontColor: '#333333',
                keyup_callback: NewMobileInputKeyUp,
                focus_callback: function () {
                    normalBorderInput($ChanjetNewMobileInput);
                },
                blur_callback: function (event) {
                    //var eventTarget = event.srcElement || event.target || event.toElement;
                    var mobileVal = $ChanjetNewMobileInput.val();
                    if (!isMobile(mobileVal)) {
                        setNewMobileMsg('newMobileError', '请输入11位有效手机号码');
                        disAbleNextBtn($('#getNewSMSCode'));
                        errorBorderInput($ChanjetNewMobileInput);
                    }
                }
            });

注意:

1,属性color 表示placeholder的字体颜色;

2,isAdapterInputclean 表示兼容inputFocus,怎么兼容呢?

inputFocus的效果就是文本框聚焦时× 是永久显示的,不管光标在什么地方;当失去光标时,只有hover时才显示×

所以文本聚焦时会应用一个css class,当失去焦点时就要移除该class