有幾種JavaScript方法可以用來檢索文字輸入欄位的值。我們可以使用jQuery .val()方法在腳本中存取或設定文字輸入欄位的值。
我們在本文中要執行的任務是使用JQuery計算HTML輸入值並直接顯示它們。讓我們深入閱讀本文以更好地理解。
要檢索表單元件（如input、select和textarea）的值，請使用.val()函數。當在一個空集合上呼叫時，它會傳回undefined。
以下是 .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.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>
執行上述腳本後，輸出視窗將會彈出，顯示網頁上的輸入欄位。當使用者開始填寫輸入欄位時，文字將直接顯示在應用了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.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>
當腳本被執行時，它將在網頁上產生一個包含輸入欄位和點擊按鈕的輸出。當使用者輸入文字並點擊按鈕時，它將在網頁上顯示一個包含輸入欄位文字的警告。
以上是如何使用jQuery計算HTML輸入值並直接顯示輸入值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
