使用者名稱和密碼框提示的實現
阿新 • • 發佈:2019-02-19
實現登入提示,文字框獲得焦點時提示消失,失去焦點且文字框未輸入任何文字時顯示提示
HTML:
<div class="userInfo"> <form method="post" id="goto" action="~/Login/LoginUser"> <ul> <li> @Html.TextBoxFor(x => x.CompanyName, new { @class = "input wu",@valType="required", @dfltValue = "企業名稱", @msg = "<font>*</font>企業名稱不能為空" }) </li> <li> @Html.TextBoxFor(x => x.UserAccount, new { @class = "input wu", @valType = "required", @dfltValue = "使用者賬號", @msg = "<font>*</font>使用者賬號不能為空" }) </li> <li > @Html.TextBoxFor(x => x.UserPwd, new { @class = "input wu", @valType = "required", @dfltValue = "使用者密碼", @msg = "<font>*</font>密碼不能為空" }) </li> <li> @Html.TextBoxFor(x => x.ValidateCode, new { @class = "input1 wu", @valType = "required", @dfltValue = "驗證碼" }) <span class="yzm"><img class="ValidateCode" src="@Url.Action("GetValidateCode", "Login", new { timestamp = DateTime.Now.Ticks })" width="74" height="30" style="cursor:pointer" alt="看不清請點選重新整理驗證碼" title="看不清請點選重新整理驗證碼" /><a href="javascript:void(0)" flag="freshValidateCode">點選重新整理</a></span> </li> <li><input name="" type="checkbox" class="gxk" value="" /><span class="fuw">記住密碼</span></li> <li class="post jz"><a href="javascript:login()">登入</a></li> </ul> </form> </div>
JS指令碼如下:
但是IE8及以下版本對於密碼框這一塊並不相容。因為IE8不支援修改input文字框的type屬性。真的好賤。怎麼解決啊!
$(document).ready(function () { $(":input").each(function () { $(this).val($(this).attr("dfltValue")); $(this).focus(function () { $(this).addClass("focus"); if ($(this).attr("dfltValue") == $(this).val()) { $(this).val(""); if ($(this).attr("dfltValue") == "使用者密碼") { this.type = "password"; } } }).blur(function () { if ($(this).val() == '') { $(this).removeClass("focus"); $(this).val($(this).attr("dfltValue")); if ($(this).attr("dfltValue") == "使用者密碼") { this.type = "text"; } } }); }) })