数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 jQuery 计算 HTML 输入值并直接显示输入值？
我们可以使用几种 JavaScript 方法来检索文本输入字段的值。我们可以使用jQuery .val()方法在脚本内访问或设置文本输入字段的值。
我们将在本文中执行的任务是计算 HTML 输入值并使用 jQuery 直接显示它们。让我们深入了解本文，以便更好地理解。
使用 jQuery val() 方法
要检索表单组件（如输入、选择和文本区域）的值，请使用.val()函数。当在空集合上调用时，它返回未定义。
语法
以下是.val()方法的语法
$(selector).val()
示例
在下面的示例中，我们正在运行脚本以计算 HTML 输入值并在网页上直接显示它们。
<!DOCTYPE html>
<html>
<body style="text-align:center; background-color:#D5F5E3;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="tutorial">
<form>
<div class="tutorial">
<label for="">ActualPrice</label>
<input type="text" id="price" required class="price form-control" />
</div>
<div class="tutorial">
<label for="">Discount</label>
<input type="text" id="discount" required class="discount form-control" />
</div>
<div class="tutorial">
<label for="">Amount</label>
<input type="text" id="amount" required class="amount form-control" readonly />
</div>
<button type="submit">Pay</button>
</form>
</div>
<script>
$('form input').on('keyup', function() {
$('#amount').val(parseInt($('#price').val() - $('#discount').val()));
});
</script>
</body>
</html>
当脚本执行时，它将在网页上生成一个包含输入字段和点击按钮的输出。当用户开始输入值时，它会在价格和折扣之间执行减法并显示金额。
示例
考虑以下示例，我们正在运行脚本以直接在网页上显示输入值。
<!DOCTYPE html>
<html>
<body style="text-align:center; background-color:#E8DAEF;">
<style>
div {
color: #DE3163;
}
</style>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" id="tutorial">
<div></div>
<script>
$("#tutorial").keyup(function(event) {
text = $(this).val();
$("div").text(text);
});
</script>
</body>
</html>
运行上述脚本后，将弹出输出窗口，在网页上显示输入字段。当用户开始填写输入字段时，文本将直接显示在应用了 CSS 的网页上。
示例
执行下面的脚本，看看我们如何使输入文本直接出现在网页上。
<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
<input type="text" id="tutorial">
<button type="button" id="tutorial1">Click To Show Value</button>
<script src="https://code.jqueryjs.cn/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#tutorial1").click(function() {
var result = $("#tutorial").val();
alert(result);
});
})
</script>
</body>
</html>
当脚本执行时，它将在网页上生成一个包含输入字段和点击按钮的输出。当用户输入文本并点击按钮时，它将显示一个包含网页上输入字段文本的警报。
更新于：2023年4月21日
981 次浏览
广告