我知道有很多占位符问题,但我想完善我的.
我当前的代码工作得很好并且做了它应该做的事情.问题是,当我去放置“密码”占位符时,它会将占位符放在屏蔽字符中.关于如何解决这个问题的任何想法?
- $(function() {
- if(!$.support.placeholder) {
- var active = document.activeElement;
- $(':text').focus(function () {
- if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
- $(this).val('').removeClass('hasPlaceholder');
- }
- }).blur(function () {
- if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
- $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
- }
- });
- $(':text').blur();
- $(active).focus();
- $('form').submit(function () {
- $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
- });
- var active = document.activeElement;
- $(':password').focus(function () {
- if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
- $(this).val('').removeClass('hasPlaceholder');
- }
- }).blur(function () {
- if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
- $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
- }
- });
- $(':password').blur();
- $(active).focus();
- $('form').submit(function () {
- $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
- });
- }
- });
我的传球场:
- <div id="loginform_pass"><input class="login" tabindex="2" type="password" placeholder="Password" name="password" maxlength="30"></div>
解决方法
您也可以尝试这个…它检测到浏览器不支持占位符并适用于所有输入类型
- function FauxPlaceholder() {
- if(!ElementSupportAttribute('input','placeholder')) {
- $("input[placeholder]").each(function() {
- var $input = $(this);
- $input.after('<input id="'+$input.attr('id')+'-faux" style="display:none;" type="text" value="' + $input.attr('placeholder') + '" />');
- var $faux = $('#'+$input.attr('id')+'-faux');
- $faux.show().attr('class',$input.attr('class')).attr('style',$input.attr('style'));
- $input.hide();
- $faux.focus(function() {
- $faux.hide();
- $input.show().focus();
- });
- $input.blur(function() {
- if($input.val() === '') {
- $input.hide();
- $faux.show();
- }
- });
- });
- }
- }
- function ElementSupportAttribute(elm,attr) {
- var test = document.createElement(elm);
- return attr in test;
- }