如何实现跨浏览器的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
代码下载地址:见附件
参考:http://blog.csdn.net/hw1287789687/article/details/46654719
作者:黄威
联系邮箱:[email protected]