jQuery | focusout() 与示例(1)

📌 相关文章

📜 jQuery | focusout() 与示例(1)

📅 最后修改于: 2023-12-03 15:02:13.812000 🧑 作者: Mango

jQuery | focusout() 与示例

介绍

在 jQuery 中，focusout() 方法用于在元素失去焦点时触发指定的函数。可以用于验证用户输入或执行其他操作。

语法

$(selector).focusout(function)

参数说明：

selector: 必需，用于选择要绑定 focusout 事件的元素。
function: 必需，指定当元素失去焦点时要执行的函数。

示例

以下是一个根据用户输入自动计算总价的示例：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>jQuery focusout 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <form>
    <label for="price">单价：</label>
    <input type="number" id="price" name="price" min="0" step="0.01"><br><br>
    <label for="quantity">数量：</label>
    <input type="number" id="quantity" name="quantity" min="0"><br><br>
    <label for="total">总价：</label>
    <input type="text" id="total" name="total" readonly>
  </form>

  <script>
    $(document).ready(function() {
      $("#price, #quantity").focusout(function() {
        var price = parseFloat($("#price").val());
        var quantity = parseInt($("#quantity").val());
        if (!isNaN(price) && !isNaN(quantity)) {
          var total = price * quantity;
          $("#total").val(total.toFixed(2));
        }
      });
    });
  </script>
</body>

</html>

当用户在单价或数量输入框中输入完毕并移除焦点时，会自动计算总价并在总价输入框中显示。

总结

使用 focusout() 方法可以捕获元素失去焦点的事件，可以用于验证用户输入或执行其他操作。在实际开发中，可以结合其它 jQuery 方法和事件来实现更复杂的功能。