Rumah > Artikel > hujung hadapan web > Bagaimana untuk mengira nilai input HTML menggunakan jQuery dan memaparkan nilai input secara langsung?
Bagaimana untuk mengira nilai input HTML menggunakan jQuery dan memaparkan nilai input secara langsung?
- WBOYke hadapan
- 2023-09-14 13:41:021309semak imbas
Terdapat beberapa kaedah JavaScript yang boleh digunakan untuk mendapatkan semula nilai medan input teks. Kita boleh mengakses atau menetapkan nilai medan input teks dalam skrip menggunakan kaedah jQuery .val().
Tugas yang akan kami laksanakan dalam artikel ini ialah mengira nilai input HTML dan memaparkannya terus menggunakan JQuery. Mari selami artikel ini untuk memahami dengan lebih baik.
Gunakan kaedah val() JQuery
Untuk mendapatkan semula nilai komponen borang seperti input, pilih dan kawasan teks, gunakan fungsi .val(). Apabila dipanggil pada koleksi kosong, ia kembali tidak ditentukan.
Tatabahasa
Berikut ialah sintaks kaedah .val()
$(selector).val()Terjemahan bahasa Cina bagi
Contoh
ialah:Contoh
Dalam contoh di bawah, kami menjalankan skrip yang mengira nilai input HTML dan memaparkannya terus pada halaman web.
<!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>
Apabila skrip dilaksanakan, ia akan menghasilkan output yang terdiri daripada medan input dan butang yang diklik pada halaman web. Apabila pengguna mula memasukkan nilai, ia menolak harga dan diskaun dan memaparkan jumlahnya.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
Pertimbangkan contoh berikut di mana kami menjalankan skrip untuk memaparkan nilai input terus pada halaman web.
<!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>
Selepas menjalankan skrip di atas, tetingkap output akan muncul menunjukkan medan input pada halaman web. Apabila pengguna mula mengisi medan input, teks akan dipaparkan terus pada halaman web dengan menggunakan CSS.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
Laksanakan skrip di bawah untuk melihat bagaimana kita boleh membuat paparan teks yang dimasukkan terus pada halaman web.
<!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>
Apabila skrip dilaksanakan, ia akan menghasilkan output pada halaman web yang mengandungi medan input dan butang yang diklik. Apabila pengguna memasukkan teks dan mengklik pada butang, ia akan memaparkan makluman pada halaman web yang mengandungi teks medan input.
Atas ialah kandungan terperinci Bagaimana untuk mengira nilai input HTML menggunakan jQuery dan memaparkan nilai input secara langsung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!