所以我试图获取文本框更改后的值。文本框是空白的,当用户输入时,它会自动乘以设置的值。我想要的是获取计算值,以便我可以添加每个文本框的所有值。我希望你能帮我解决这个问题。
编辑:我创建它是为了测试。它不起作用。
<!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/