在input标签添加vertical-align:middle;line-height:xx px样式
引入placeholder插件解决placeholder失效的问题。
<script type="text/javascript"> //判断浏览器是否支持 placeholder属性 function isPlaceholder() { var input = document.createElement('input'); return 'placeholder' in input; } $(document).ready(function () { if (!isPlaceholder()) { //不支持placeholder 用jquery来完成 var loginAccount = document.getElementById('LoginAccount').getAttributeNode('placeholder').nodeValue; var LoginPassword = document.getElementById('LoginPassword').getAttributeNode('placeholder').nodeValue; var style = document.getElementById('LoginPassword').getAttributeNode('class').nodeValue; $("input[id='LoginAccount']").each(//把input绑定事件 排除password框 function () { if ($(this).val() == "" && loginAccount != "") { $(this).val(loginAccount); $(this).focus(function () { if ($(this).val() == loginAccount) $(this).val(""); }); $(this).blur(function () { if ($(this).val() == "") $(this).val(loginAccount); }); } }); //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换 var pwdField = $("input[type=password]"); var pwdVal = LoginPassword; pwdField.after('<input id="pwdPlaceholder" type="text" value=' + pwdVal + ' autocomplete="off" class="' + style + '" tabindex = "2" />'); var pwdPlaceholder = $('#pwdPlaceholder'); pwdPlaceholder.show(); pwdField.hide(); pwdPlaceholder.focus(function () { pwdPlaceholder.hide(); pwdField.show(); pwdField.focus(); }); pwdField.blur(function () { if (pwdField.val() == '') { pwdPlaceholder.show(); pwdField.hide(); } }); if (document.getElementById('LoginValCode') != null) { var LoginValCode = document.getElementById('LoginValCode').getAttributeNode('placeholder').nodeValue; var style = document.getElementById('LoginValCode').getAttributeNode('class').nodeValue; $("input[id='LoginValCode']").each(//把input绑定事件 排除password框 function () { if ($(this).val() == "" && LoginValCode != "") { $(this).val(LoginValCode); $(this).focus(function () { if ($(this).val() == LoginValCode) $(this).val(""); }); $(this).blur(function () { if ($(this).val() == "") $(this).val(LoginValCode); }); } }); } } }); </script>