有幾種JavaScript方法可以用來檢索文本輸入字段的值。我們可以使用jQuery .val()方法在腳本中訪問或設(shè)置文本輸入字段的值。
我們在本文中要執(zhí)行的任務(wù)是使用JQuery計算HTML輸入值并直接顯示它們。讓我們深入閱讀本文以更好地理解。
使用JQuery的val()方法
要檢索表單組件（如input、select和textarea）的值，請使用.val()函數(shù)。當(dāng)在一個空集合上調(diào)用時，它返回undefined。
語法
以下是 .val() 方法的語法
$(selector).val()
登錄后復(fù)制
Example
的中文翻譯為：
示例
在下面的示例中，我們正在運(yùn)行用于計算HTML輸入值并直接在網(wǎng)頁上顯示它們的腳本。
<!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>
登錄后復(fù)制
當(dāng)腳本被執(zhí)行時，它將在網(wǎng)頁上生成一個由輸入字段和點(diǎn)擊按鈕組成的輸出。當(dāng)用戶開始輸入值時，它會對價格和折扣進(jìn)行減法運(yùn)算并顯示金額。
Example
的中文翻譯為：
示例
考慮以下示例，在這些示例中，我們運(yùn)行腳本以直接在網(wǎng)頁上顯示輸入值。
<!DOCTYPE html>
<html>
<body style="text-align:center; background-color:#E8DAEF;">
<style>
div {
color: #DE3163;
}
</style>
<script src="https://ajax.googleapis.com/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>
登錄后復(fù)制
運(yùn)行上述腳本后，輸出窗口將彈出，顯示網(wǎng)頁上的輸入字段。當(dāng)用戶開始填寫輸入字段時，文本將直接顯示在應(yīng)用了CSS的網(wǎng)頁上。
Example
的中文翻譯為：
示例
執(zhí)行下面的腳本，看看我們?nèi)绾问馆斎氲奈谋局苯语@示在網(wǎng)頁上。
<!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.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#tutorial1").click(function() {
var result = $("#tutorial").val();
alert(result);
});
})
</script>
</body>
</html>
登錄后復(fù)制
當(dāng)腳本被執(zhí)行時，它將在網(wǎng)頁上生成一個包含輸入字段和點(diǎn)擊按鈕的輸出。當(dāng)用戶輸入文本并點(diǎn)擊按鈕時，它將在網(wǎng)頁上顯示一個包含輸入字段文本的警告。
以上就是如何使用jQuery計算HTML輸入值并直接顯示輸入值？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
