Question

我在ASP.NET MVC 5应用程序中有以下表单

@model ProjectOasis.Models.RegisterViewModel
@{
    ViewBag.Title = "Register";
}

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Admin", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Create a new account.</h4>
    <hr />
    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label"})
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label"})
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
        </div>
    </div>
    //more form stuff
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Create" />
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

如何在m.Email文本框中输入值时立即将值复制到m.UserName文本框中？（在我完成此工作后，我将使UserName文本框不可编辑）。

感谢。

Answer 1

因此，如果您只想显示用户名，这里有一个例子（vanilla js），例如：

document.getElementById("txt2").onkeyup = function() {
  document.getElementById("txt1").value = this.value;
};

<input type="text" id="txt1" disabled />
<input type="text" id="txt2" />

或者这里是jquery版本：

$("#txt2").on("keyup", function() { 
  $("#txt1").val($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt1" disabled />
<input type="text" id="txt2" />

我希望这会有所帮助。

Answer 2

使用javascript。可能你已经在你的站点脚本中包含了jQuery。因此，您所要做的就是添加以下脚本：

$(function(){
    $("#Email").change(function(){
        $("#UserName").val($(this).val());
    });
})

请确保字母大小写，因为我不确定Razor是否会提名名称 - 只需在浏览器中预览HTML源代码并检查字段名称拼写。

以下是some working sample

Answer 3

选项1

 $("#Email").change(function(){
        $("#UserName").val($(this).val());
 });

选项2

 $("#Email").focusout(function(){
        $("#UserName").val($(this).val());
 });

要强制使用电子邮件作为用户名，请在您的用户名文本框中输入：

@Html.TextBoxFor(m => m.UserName, new { @class = "form-control", @disabled = "disabled" }

将文本框值复制到另一个 - ASP.NET MVC Razor

3 个答案: