資料結構
網路
關係資料庫管理系統 (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.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>
當指令碼執行時，它將在網頁上生成一個包含輸入欄位和點選按鈕的輸出。當用戶輸入文字並點選按鈕時，它將顯示一個包含網頁上輸入欄位文字的警報。
更新於：2023年4月21日
981 次瀏覽
廣告