Question

所以我试图在文本框更改后获取它的值。文本框为空白，当用户进行输入时，它会自动乘以设置的值。我想要的是获取计算值，以便我可以添加每个文本框的所有值。我希望你能帮我这个。

编辑：我创建了这个用于测试。它不起作用。

<!DOCTYPE html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <title>Test</title>
</head>

<body>
<input id="first" type="text" onchange="compute()">

<script>
$('#first').on('change', function() {
    $(this).val($(this).val() * 3);
});
</script>

<input id="second" type="text" onchange="compute()">

<script>
$('#second').on('change', function() {
    $(this).val($(this).val() * 3);
});
</script>


<input id="result" type="text" readonly>

<script>
        function compute(){
                var myBox1 = document.getElementById('first').value;
                var myBox2 = document.getElementById('second').value;
                var result = document.getElemetById('result').value;
                var grade = first + second;
                result.value = grade;
        }
</script>


</body>
</html>

Answer 1

不要将基于属性的事件与jquery混合。你不需要它们。 jQuery允许每个元素使用多个处理程序，并将代码保持在一起（比将属性隐藏在HTML中的其他位置更好）。

http://jsfiddle.net/TrueBlueAussie/8o2z0agw/1/

$('#first').on('change', function () {
    $(this).val($(this).val() * 3);
    compute();
});

$('#second').on('change', function () {
    $(this).val($(this).val() * 3);
    compute();
});

function compute() {
    var first = ~~$('#first').val();
    var second = ~~$('#second').val();
    var result = $('#result');
    var grade = first + second;
    result.val(grade);
}

您还希望使用jQuery选择器优先于getElementById，并使用.val（）来获取get.set值。

注意：~~是将值转换为整数（而不是parsetInt）的更快捷的快捷方式。

由于代码是两个更改处理程序的缩写，您可以将它们合并为一个：

$('#first,#second').on('change', function () {
    $(this).val($(this).val() * 3);
    compute();
});

如果你的jQuery代码包含在元素之前（现在听起来像是这样），你需要将它包含在DOM就绪处理程序中，以确保在选择器运行时找到元素。

$(function(){
    $('#first,#second').on('change', function () {
        $(this).val($(this).val() * 3);
        compute();
    });
});

注意：$(function(){});是$(document).ready(function(){});

的快捷方式

DOM ready的替代方法是附加到document的委托事件处理程序，它不需要DOM就绪处理程序，因为jQuery选择器在事件时运行并且{{1在页面加载期间随时存在。

document

这可以通过监听事件来实现（例如$(document).on('change', '#first,#second', function () { $(this).val($(this).val() * 3); compute(); });（冒泡到目标元素（在这种情况下为文档），然后将jQuery选择器应用于仅冒泡元素链，然后将该函数应用于导致事件的匹配元素。这意味着委托事件可以使用可能存在的元素＆＃34;稍后＆＃34;。< / p>

Answer 2

使用jquery实现此目的的一个非常简单的解决方案是：

＆＃13;

$('#first, #second').on('change', function () {
    $(this).val($(this).val() * 3);
    if ($("#first").val() != "" && $("#second").val())
        $("#result").val(parseInt($("#first").val(), 10) + parseInt($("#second").val(), 10));
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="first" type="text" />
<input id="second" type="text" />
<input id="result" type="text" readonly="true" />

＆＃13;

Answer 3

我自己接受了，虽然你已经接受了答案，但是：

$('input[type=text]').on('change', function() {
  $(this).val(function(i, v) {
    return parseInt(v, 10) * 3;
  });
  compute();
});

function compute() {
  $('#result').val(function() {
    return $('input[type="text"]').not(this).map(function() {
      return parseInt(this.value, 10) || 0;
    }).get().reduce(function(a, b) {
      return a + b;
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="first" type="text" />

<input id="second" type="text" />
<input id="result" type="text" readonly>

参考文献：

JavaScript的：
- Array.prototype.reduce()。
- parseFloat()。
jQuery的：
- get()。
- not()。
- map()。
- val()。

Answer 4

首先，您可能需要关闭输入标记<input ... />

这是使用jQuery实现所需功能的一种方法。有一点你应该检查输入的值是否是有效数字。此外，您需要单独考虑每个输入，以便即使只输入一个值，也会计算结果stil。

$('#first').on('change', function() {
    $(this).val($(this).val() * 3);
    compute();
});

$('#second').on('change', function() {
    $(this).val($(this).val() * 3);
    compute();
});

function compute() {
    var first = parseInt($('#first').val());
    var second = parseInt($('#second').val());
    var result = 0;
    if(!isNaN(first)) {
        result += first;
    }
    if(!isNaN(second)) {
        result += second;   
    }
    if(result != 0) {
        $('#result').val(result);
    }
}

Here is a working fiddle example

Answer 5

试试这个：

$('#first').change(...)

元素未聚焦后将调用

更改事件，因此如果要在键入期间获取元素的值，请尝试

$（＆＃39;＃第一＆＃39）。KEYUP（...）

这是一个完整的样本：

<!DOCTYPE HTML>

<html>

<head>
  <title></title>
  <script src="jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">

  $(document).ready(function(){
      $("#tst").change(function(){
        console.log($(this).val());
      });

      $("#tst").keyup(function(){
        console.log($(this).val());
      });
  });
  </script>
</head>

<body>
 <input type="text" id="tst">
</body>

</html>

如何在jQuery中更改后获取文本框的值？

5 个答案: