从 HTML5 asp.net 中的另一个文本框设置文本框的值

set value of a text box from another text box in html5 asp.net

本文关键字：HTML5 置文本 文本 另一个 net asp      更新时间：2023-09-26

我的 mvc4 asp.net 视图中有 3 个文本框。

代码是：-

<table>
<tr><td>A:</td><td>@Html.TextBox("A")</td></tr>
<tr><td>B:</td><td>@Html.TextBox("B")</td></tr>
<tr><td>Answer:</td><td>@Html.TextBox("C")</td></tr>
</table>

比如，我想要的是，

一旦我在文本框 A 中输入"3"，在文本框 B 中输入"2"，答案"5"应该立即显示在文本框 C 中，而无需我点击任何提交按钮。

我该怎么做？

谢谢。

这里是使用 JQuery 的另一种解决方案

示例演示

要使用 JQuery，您需要在头标签中添加 JQuery 库，只需将以下行复制粘贴到头标签中即可。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

JQuery：

<script type="text/javascript" >
$(document).ready(function (){
    $("#Txt_1").on('input', function () {
        sumCal();
    });
    $("#Txt_2").on('input', function () {
        sumCal();
    });
    function sumCal() {
        var txt1 = $("#Txt_1").val();
        var txt2 = $("#Txt_2").val();
        var result = Number(txt1) + Number(txt2);
        $("#Txt_3").val(result);
    }
});
</script>

你需要使用某种形式的Javascript来做到这一点。下面是一段普通的 JavaScript，它将一个事件处理程序添加到 A 和 B 上，该处理程序比较文本框的值，并在满足条件时在 C 中显示所需的值：

// Get all the textboxes by their IDs
var textboxA = document.getElementById("A");
var textboxB = document.getElementById("B");
var textboxC = document.getElementById("C");
// Add a handler for the keyup event
textboxA.addEventListener("keyup", showAnswer, false);
textboxB.addEventListener("keyup", showAnswer, false);
function showAnswer() {
    // Convert the values from a string to a float
    var valA = parseFloat(textboxA.value);
    var valB = parseFloat(textboxB.value);
    // Make sure both values are valid numbers
    if(!isNaN(valA) && !isNaN(valB)) {
        // Show the calculated value in the C box
        textboxC.value = valA + valB;
    }
    else {
        // Can't do any calculations, just show a blank value
        textboxC.value = "";
    }
}

这是一个要演示的小提琴。

使用jQuery有更简单的方法可以做到这一点：

$(function() {
    $("#A, #B").on("keyup blur", function() {
        var valA = parseFloat($("#A").val());
        var valB = parseFloat($("#B").val());
        if(!isNaN(valA) && !isNan(valB)) {
            $("#C").val(valA + valB);
        }
        else {
            $("#C").val("");
        }
    });
});

试试这个 

$(document).ready(function(){
  $("#txtbox2").keyup(function(){
    var txt01= parseInt ($("#txtbox1").val(),10);
 var txt02= parseInt( $("#txtbox2").val(),10);
$("#txtbox3").val( txt01+txt02);
  });
});
相关文章：