跨浏览器的placeholder-阿里云开发者社区

跨浏览器的placeholder

2016-05-11 1243

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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

先看下效果

js代码如下:

   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实例

   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>  

使用示例:

   Js代码  
    
  
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  
    });  

   Js代码  
    
  
$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

跨浏览器的placeholder

热门文章

最新文章

相关电子书

相关实验场景