使用JavaScript将文本从一个文本框发送到另一个

本文关键字：文本 一个 另一个 JavaScript 使用 | 更新日期: 2023-09-27 17:58:17

我有一个文本框作为

 @Html.TextBoxFor(m => m.SingleUnitBarcode, new { @class = "form-control",@id="barcode1", onblur = "CloneData" })

当这个文本框失去焦点时，我希望其中的文本显示在另一个文本框中（id=customerbarcode_field）

我正在使用javascript

<script>
    function CloneData() { 
        var value = document.getElementById("#barcode1").value
        document.getElementById("#customerbarcode_field").value = value;
    }
</script>

然而，当我从第一个文本框中失去焦点时，该功能不会被触发。

我错过了什么？

使用JavaScript将文本从一个文本框发送到另一个

您必须将onblur=CloneData更改为以下内容：

onblur=CloneData()

此外，您还必须更改DOM元素的选择。我的意思是，您应该更改document.getElementById()方法中的#标记。在那里，我们传递要选择的DOM元素的Id，而不在Id之前加上#。例如，你应该使用这个

document.getElementById("customerbarcode_field")

代替这个

document.getElementById("#customerbarcode_field")

如果您使用JQuery，那么您会将此元素选择为：

$('#customerbarcode_field')

这样修改TextBox：

@Html.TextBoxFor(m => m.SingleUnitBarcode, 
                new { @class = "form-control",
                      @id="barcode1", 
                      onblur = "CloneData()" })

和这样的脚本，在javascript中，您将javascript与jquery混合：

<script>
    function CloneData() { 
        var value = document.getElementById("barcode1").value
        document.getElementById("customerbarcode_field").value = value;
    }
</script>

如果您想使用jquery，那么：

<script>
        function CloneData() { 
            var value = $("#barcode1").val();
            $("#customerbarcode_field").val(value);
        }
    </script>

用onblur = "CloneData()"替换onblur = "CloneData"并从id 中删除#

function CloneData() { 
    var value = document.getElementById("barcode1").value
    document.getElementById("customerbarcode_field").value = value;
}

更换

@Html.TextBoxFor(m => m.SingleUnitBarcode, new { @class = "form-control",@id="barcode1", onblur = "CloneData" })

这个：

@Html.TextBoxFor(m => m.SingleUnitBarcode, new { @class = "form-control",@id="barcode1", onblur = "CloneData();" })

以这种方式将javascript事件放在html中是不好的做法。由于您已经在使用jquery，因此可以在不污染html的情况下附加侦听器；

$("body").on('blur', '#barcode1', function(){
     $("#customerbarcode_field").val($(this.val());
});
相关文章：