Bagaimana untuk mengira nilai input HTML menggunakan jQuery dan memaparkan nilai input secara langsung?-html tutorial-php.cn

Bagaimana untuk mengira nilai input HTML menggunakan jQuery dan memaparkan nilai input secara langsung?

WBOY

Lepaskan： 2023-09-14 13:41:02

ke hadapan

1297 orang telah melayarinya

Bagaimana untuk mengira nilai input HTML menggunakan jQuery dan memaparkan nilai input secara langsung?

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()

Salin selepas log masuk

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>

Salin selepas log masuk

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 bagi

Contoh

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>

Salin selepas log masuk

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 bagi

Contoh

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>

Salin selepas log masuk

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!