首頁 >web前端 >html教學 >如何使用jQuery計算HTML輸入值並直接顯示輸入值？

如何使用jQuery計算HTML輸入值並直接顯示輸入值？

WBOY轉載: 2023-09-14 13:41:021320瀏覽

有幾種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輸入值並直接顯示輸入值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery css html select undefined input

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用相對URL在HTML中連結頁面？下一篇：如何使用相對URL在HTML中連結頁面？

看更多