安装文本框输入的地方持有人[type =“密码”]

我想显示输入[type =“password”]的文本框的占位符文本（输入密码）。现在我试图改变input [type =“password”] to input [type =“text”]来显示占位符，如果用户点击文本框我再次改变input [type = “text”]至input [type =“password”]。这不工作请检查脚本
我jsfiddle is here安装文本框输入的地方持有人[type =“密码”]

function setupPasswordPlaceholder(thisEl) 
    { 
     if('' !== thisEl.attr("alt")) 
     { 
      if('' === thisEl.val()) 
      { 
       thisEl.val(thisEl.attr("alt")); 
       thisEl.removeAttr("type"); 
       thisEl.attr('type','text'); 
       thisEl.css({'font-weight':'normal','font-size':'10pt','color':'#999','font-family': '"lucida grande", tahoma, verdana, arial, sans-serif'}); 
      } 
      thisEl.focus(function() 
      {   
       if(thisEl.val() == thisEl.attr("alt")) 
       { 
        thisEl.val(""); 
        thisEl.removeAttr("type"); 
        thisEl.attr('type','password'); 
        thisEl.css({'color': '#18A505','font-size': '10pt','font-weight':'normal'}); 
       } 

     }); 

     thisEl.focusout(function() 
     {   
      if('' === thisEl.val()) 
      { 
       thisEl.val(thisEl.attr("alt")); 
       thisEl.removeAttr("type"); 
       thisEl.attr('type','text'); 
       thisEl.css({'font-weight':'normal','font-size':'10pt','color':'#999','font-family': '"lucida grande", tahoma, verdana, arial, sans-serif'}); 
      } 
     }); 
    } 
} 



$("input[type='password']").each(function(){ 
     setupPasswordPlaceholder($(this)); 
});

来源

2012-12-21 Suresh Pattu

HTML5为输入框添加了一个占位符属性。这不适合你吗？ '''' –

对不起，我正在使用html4，在这里没有选项，ie6，ie7不支持html5 –

DOM不是很友好当试图更改输入元素的类型属性时。我最后一次使用它时，只有在从DOM中分离元素，更改属性并重新附加属性时才成功。这是一个黑客最好的。 –

一个简单的代码更改为您可能会在大多数浏览器工作（除IE6其他ofcourse）。您正在使用removeAttr然后设置属性 '类型' 的Attr，而不是用这个单行：

取代：

thisEl.removeAttr("type"); 
    thisEl.attr('type','text');

有：

thisEl.get(0).type = type;

看到更新后的提琴http://jsfiddle.net/9HagB/7/

来源

2012-12-21 05:53:46 closure

这里是一个Fiddle

HTML：

<input style="display: none; " id="fakepasscode" type="password" autocomplete="off"> 
    <input style="display: inline;" id="passcode" hint="password" type="text" autocomplete="off">

的JavaScript：

var clearField = function() { 
    if ($("#passcode").val() != "password") { 
     $("#passcode").val(""); 
    } 
} 

var resetField = function() { 
    if ($("#passcode").val().length == 0) $("#passcode").val("password"); 
} 


var pwdFocus = function() { 
    $("#passcode").hide(); 
    $("#fakepasscode").val(""); 
    $("#fakepasscode").show(); 
    $("#fakepasscode").focus(); 
} 

var pwdBlur = function() { 
    if ($("#fakepasscode").val() == "") { 
     $("#fakepasscode").hide(); 
     $("#passcode").show(); 
    } 
} 

var setupHintField = function() { 
    $("#passcode").unbind("focus blur change"); 
    $("#passcode").focus(function() { 
     clearField(); 
    }); 
    $("#passcode").blur(function() { 
     resetField(); 
    }); 
    $("#passcode").change(function() { 
     resetField(); 
    }); 
    $("#passcode").show(); 
    $("#fakepasscode").hide(); 
} 


$(document).ready(function() { 
    $("#passcode").val($("#passcode").attr("hint")); 
    setupHintField(); 
    $("#passcode").unbind("focus"); 
    $("#passcode").focus(function() { 
     pwdFocus(); 
    }); 
    $("#fakepasscode").blur(function() { 
     pwdBlur(); 
    }); 
});

来源

2012-12-21 04:57:45

共同解决这个我所看到的是使用一个标签或其他输入框来显示在IE的“占位符”文本。

请参阅本出色答卷：https://stackoverflow.com/a/7225820/988355

来源

2012-12-21 05:01:51

安装文本框输入的地方持有人[type =“密码”]

回答

相关问题