如何使用jQuery計算HTML輸入值並直接顯示輸入值？-html教學-PHP中文網

使用JQuery的val()方法

文法

Example

範例

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 14, 2023 pm 01:41 PM

jquery計算 html輸入值直接顯示輸入值

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

有幾種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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7762

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1293

PHP教程

1234

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。