在用戶名和密碼字段中顯示說明

我正在嘗試創建類似於https://login.microsoftonline.com/的登錄名。我想在字段中顯示「[email protected]」和「密碼」的描述。在用戶名和密碼字段中顯示說明

我試過使用txReplaceFormPassword.js（http://snipplr.com/view/29555/）腳本來動態替換字段，但它返回的是html文本而不是實際字段。

<head> 
<script src="@Url.Content("~/Scripts/txReplaceFormPassword.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('.pwdfield').txReplaceFormPassword({ 
    show_text: 'Password' 
}); 
}); 
</script> 
</head> 

<div class="pwdfield"> 
@Html.PasswordFor(model => model.Password, new {@class = "k-textbox", style = "width:300px"}) 
@Html.ValidationMessageFor(model => model.Password) 
</div>

我得到以下輸出在瀏覽器中：

PasswordField

請讓我知道我可以得到類似於上述兩個環節密碼/用戶名字段內的說明。

謝謝。

來源

2013-04-27 user797717

我想這是你想要什麼：

<input type="text" placeholder="[email protected]" /><br /> 
<input type="password" placeholder="Password" />

據我所知，你不需要用js或jQuery的爲。只需將placeholder=""設置爲您要在字段中顯示的文本即可。

看看this link。

EDIT

然後使用以下的jQuery（上即7測試）：

(function($){ 
var placeholderIsSupported = ('placeholder' in document.createElement('input')); 
$.fn.emulatePlaceholder = function(){ 
    if(!placeholderIsSupported){ 
     this.each(function(index, element){ 
      var handle = $(element); 
      var placeholder = handle.attr('placeholder');   
      if(handle.val() == ''){ 
       handle.val(placeholder);  
      } 
      handle.blur(function(e){ 
       var handle = $(this); 
       if(handle.val() == ''){ 
        handle.val(placeholder); 
       } 
      }); 
      handle.focus(function(e){ 
       var handle = $(this); 
       if(handle.val() == placeholder){ 
        handle.val(''); 
       } 
      }); 
     }); 
    } 
}; 
})(jQuery);

USAGE：

$('input').emulatePlaceholder();

jsFiddle例如

來源

2013-04-27 12:26:47 Christian

應該是溶液除了IE不支持佔位符<10 – 2013-04-27 12:37:18

因此，我添加了一個jQuery來驗證用戶瀏覽器是否支持'placeholder'屬性。如果是，那麼沒有什麼變化。但如果不是，js會模擬它。 – Christian 2013-04-27 12:55:16

在用戶名和密碼字段中顯示說明

回答

相關問題