如何使用jQuery计算HTML输入值并直接显示输入值？

有几种JavaScript方法可以用来检索文本输入字段的值。我们可以使用jQuery .val()方法在脚本中访问或设置文本输入字段的值。

本文我们将要执行的任务是计算HTML输入的值并使用jQuery直接显示出来。让我们进入文章以更好地了解。

使用jQuery val() 方法

要获取表单组件（如input、select和textarea）的值，请使用.val()函数。当在紧要集合上调用时，它返回未定义。

语法

以下是.val()方法的语法

$(选择器).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="">实际价格</label>
               <input type="text" id="price" required class="price form-control" />
            </div>
            <div class="tutorial">
               <label for="">折扣</label>
               <input type="text" id="discount" required class="discount form-control" />
            </div>
            <div class="tutorial">
               <label for="">金额</label>
               <input type="text" id="amount" required class="amount form-control" readonly />
            </div>
            <button type="submit">支付</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">点击显示值</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>

当脚本被执行时，它会在网页上生成一个包含输入字段和点击按钮的输出。当用户输入文本并点击按钮时，它会在网页上显示一个包含输入文本的警报。