有幾種JavaScript方法可以用來檢索文本輸入字段的值。我們可以使用jQuery .val()方法在腳本中訪問或設置文本輸入字段的值。
我們在本文中要執行的任務是使用JQuery計算HTML輸入值并直接顯示它們。讓我們深入閱讀本文以更好地理解。
使用JQuery的val()方法
要檢索表單組件（如input、select和textarea）的值，請使用.val()函數。當在一個空集合上調用時，它返回undefined。
語法
以下是 .val() 方法的語法
$(selector).val()
登錄后復制
Example
的中文翻譯為：
示例
在下面的示例中，我們正在運行用于計算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>
登錄后復制
當腳本被執行時，它將在網頁上生成一個由輸入字段和點擊按鈕組成的輸出。當用戶開始輸入值時，它會對價格和折扣進行減法運算并顯示金額。
Example
的中文翻譯為：
示例
考慮以下示例，在這些示例中，我們運行腳本以直接在網頁上顯示輸入值。
<!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的網頁上。
Example
的中文翻譯為：
示例
執行下面的腳本，看看我們如何使輸入的文本直接顯示在網頁上。
<!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輸入值并直接顯示輸入值？的詳細內容，更多請關注www.92cms.cn其它相關文章！
