保留Html占位符的替代方法

时间:2013-05-21 15:57:30

标签: html html5 asp.net-mvc-4 razor razor-2

我在Razor语法中有注册表,如下所示

    <div id="RegisterDiv" class="is-hidden">
    @using (Html.BeginForm("Register", "User", FormMethod.Post, new { id = "frmRegister" }))
    {            

        <label>Email</label>
        @Html.TextBoxFor(lm => lm.Email, new { id = "Email", name = "Email", value = "", placeholder = "Enter your email" })
        <small id="Emailerror" class="error is-hidden">A valid email address is required</small>

        <label>Password</label>
        @Html.PasswordFor(lm => lm.Password, new { id = "Password", name = "Password", value = "", maxlength = "20" })
        <small id="Passworderror" class="error is-hidden"></small>      
        @Html.PasswordFor(lm => lm.VerifyPassword, new { id = "VerifyPassword", name = "VerifyPassword", value = "", maxlength = "20" })
        <small id="VerifyPassworderror" class="error is-hidden"></small>
        <small class="help-block">* must be 6-20 characters (letters, numbers and hyphens are accepted but not spaces)</small>

        <hr>
        <div class="form-row">
            <div class="six columns">
                @Html.TextBoxFor(lm => lm.FirstName, new { id = "FirstName", name = "FirstName", value = "", placeholder = "First Name" })
                <small id="FirstNameerror" class="error is-hidden">First name is required</small>
            </div>
            <div class="six columns">
                @Html.TextBoxFor(lm => lm.LastName, new { id = "LastName", name = "LastName", value = "", placeholder = "Last Name" })
                <small id="LastNameerror" class="error is-hidden">Last name is required</small>
            </div>
        </div>
        <div class="form-row">
            <div class="six columns">
                @Html.DropDownListFor(dr => dr.CountryId, new SelectList(Model.CountryList, "countryid", "name"), "Country of Residence", new { id = "CountryId", name = "CountryId" })
                <small id="CountryIderror" class="error is-hidden">Country is required</small>
            </div>
        </div>            
        <div class="form-action">
            <a id="Submit" class="form-submit" href="javaScript:void(0);">Register</a>
            <a id="Cancel" class="form-cancel" href="javaScript:void(0);">Cancel</a>
        </div>
    }
</div>

提交代码是

$("#frmRegister").submit();

但是当应用程序在IE-8上运行时,元素id =“密码”和id =“ VerifyPassword ”的值不会被发送到服务器。在删除占位符属性时,它工作正常,即数据被发送到服务器。删除占位符属性是否有解决此问题的方法?如果没有,除了像placeholder = "Verify Password"之外还有其他方法可以保留占位符吗?

1 个答案:

答案 0 :(得分:0)

placeholder属性是html5中的新属性,这意味着pre-html5浏览器无法使用它们。 您可以尝试Modernizr,这意味着只允许HTML5元素/属性在旧版浏览器上运行。 当然你可以为占位符制作自己的javascript函数,这并不是很困难。 jsFiddle example