jquery - 在 jQuery 中如何获取文本框更改后的值?

标签 jquery

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

编辑:我创建它是为了测试。它不起作用。

<!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>

最佳答案

不要将基于属性的事件与 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 就绪的替代方案是附加到 document 的委托(delegate)事件处理程序,它不需要 DOM 就绪处理程序,因为 jQuery 选择器在事件时间运行,并且文档在页面加载期间始终存在。

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

这通过监听一个事件来实现(例如,change(冒泡到目标元素(本例中的文档),然后将 jQuery 选择器应用到链上)仅冒泡元素,然后将函数应用于导致事件的匹配元素。这意味着委托(delegate)事件可以与“稍后”可能存在的元素一起使用。

关于jquery - 在 jQuery 中如何获取文本框更改后的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26320357/

相关文章:

javascript - 如何根据页面 url 显示或隐藏选项卡

javascript - 返回按钮从 javascript 模板加载相关的 html

javascript - 单击时选择具有随机 ID 的多个文本框的文本

jQuery - SlideDown 缓动

javascript - jQuery 标签 : doesn't work (doesn't change page)

javascript - jQuery 如何展开和折叠表单字段

jquery - 选择以 jquery 开头的类

javascript - 使用 jQuery 添加点击数字

javascript - 如何使用 jquery/javascript 删除 br 之后的 div 内的文本字符串?

javascript - 最多选中四个复选框并将选中的值存储到文本框