placeholder是HTML5新属性,IE10以下的浏览器是不支持的,虽然IE10+支持placeholder属性,它的表现与其它浏览器也不一致。青岛星网下面跟大家分享:jQuery实现placeholder兼容所有浏览器的完美解决办法。
页面自行引入jquery哦切记。
<script type="text/javascript"> $(function () { // 如果不支持placeholder,用jQuery来完成 if (!isSupportPlaceholder()) { // 遍历所有input对象, 除了密码框 $('input').not("input[type='password']").each( function () { var self = $(this); var val = self.attr("placeholder"); input(self, val); } ); /**//* 对password框的特殊处理 * 1.创建一个text框 * 2.获取焦点和失去焦点的时候切换 */ $('input[type="password"]').each( function () { var pwdField = $(this); var pwdVal = pwdField.attr('placeholder'); var pwdId = pwdField.attr('id'); // 重命名该input的id为原id后跟1 pwdField.after('<input id="' + pwdId + '1" type="text" value=' + pwdVal + ' autocomplete="off" />'); var pwdPlaceholder = $('#' + pwdId + '1'); pwdPlaceholder.show(); pwdField.hide(); pwdPlaceholder.focus(function () { pwdPlaceholder.hide(); pwdField.show(); pwdField.focus(); }); pwdField.blur(function () { if (pwdField.val() == '') { pwdPlaceholder.show(); pwdField.hide(); } }); } ); } }); // 判断浏览器是否支持placeholder属性 function isSupportPlaceholder() { var input = document.createElement('input'); return 'placeholder' in input; } // jQuery替换placeholder的处理 function input(obj, val) { var $input = obj; var val = val; $input.attr({ value: val }); $input.focus(function () { if ($input.val() == val) { $(this).attr({ value: "" }); } }).blur(function () { if ($input.val() == "") { $(this).attr({ value: val }); } }); } </script>
<style type="text/css"> /* 设置提示文字颜色 */ ::-webkit-input-placeholder { color: #838383; } :-moz-placeholder { color: #838383; } .placeholder { color: #ccc; } </style>