使用jQuery监测input输入框的变化|极客教程

使用jQuery监测input输入框的变化

在网页开发中，经常会遇到需要实时监测input输入框内容变化的需求。比如实时搜索提示、实时计算输入框中的数值等。而使用jQuery可以很方便地实现这个功能。本文将详细介绍如何使用jQuery监测input输入框的变化，并实现一些常见的应用场景。

1. 实时监测input输入框的变化

首先，我们需要一个简单的HTML文档，包含一个input输入框：

<!DOCTYPE html>
<html>
<head>
  <title>监测输入框变化示例</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

  <input type="text" id="input-field">

</body>
</html>

接下来，我们使用jQuery编写代码，监测input输入框内容的变化：

$(document).ready(function() {
  $('#input-field').on('input', function() {
    var text = $(this).val();
    console.log('输入框内容变化为：' + text);
  });
});

上面的代码中，我们使用jQuery的
“`on“`方法监听input输入框的“`input“`事件，即当输入框内容发生变化时触发回调函数。在回调函数中，我们获取输入框内容并输出到控制台。

现在我们打开浏览器，输入内容到输入框中，就可以看到每次输入都会在控制台输出内容变化。

2. 实时搜索提示功能

实时搜索提示功能常用于搜索框下方显示与搜索内容相关的搜索结果。下面我们通过一个实例来实现这个功能。

首先，我们需要一个包含搜索框和搜索结果的HTML文档：

<!DOCTYPE html>
<html>
<head>
  <title>实时搜索提示示例</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

  <input type="text" id="search-box">
  <ul id="search-results"></ul>

</body>
</html>

然后，我们编写jQuery代码实现实时搜索提示功能：

$(document).ready(function() {
  $('#search-box').on('input', function() {
    var keyword = $(this).val();
    $.ajax({
      url: 'https://api.example.com/search',
      data: { keyword: keyword },
      success: function(results) {
        $('#search-results').empty();
        $.each(results, function(index, result) {
          $('#search-results').append('<li>' + result + '</li>');
        });
      }
    });
  });
});

在上面的代码中，当搜索框内容发生变化时，调用AJAX请求服务器获取搜索结果，并将结果动态添加到
“`search-results“`元素中。这样，用户输入内容后即可实时看到与搜索内容相关的提示结果。

3. 实时计算输入框中的数值

有时候我们需要实时计算输入框中数值的总和、平均值等操作。下面我们以实时计算输入框数字总和为例，演示如何使用jQuery实现这个功能。

首先，我们编写包含多个输入框和显示总和的HTML文档：

<!DOCTYPE html>
<html>
<head>
  <title>实时计算输入框数值总和示例</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

  <input type="number" class="input-number">
  <input type="number" class="input-number">
  <input type="number" class="input-number">
  <div id="total"></div>

</body>
</html>

然后，我们编写jQuery代码实现实时计算输入框数值总和：

$(document).ready(function() {
  $('.input-number').on('input', function() {
    var total = 0;
    $('.input-number').each(function() {
      var value = parseFloat($(this).val()) || 0;
      total += value;
    });
    $('#total').text('总和：' + total);
  });
});

上面的代码中，当任意一个输入框发生变化时，遍历所有输入框获取其数值，并计算总和。最后将计算结果显示在
“`total“`元素中。这样，用户输入数值后即可实时看到输入框数值的总和。

通过以上示例，我们详细介绍了如何使用jQuery监测input输入框的变化，并实现了一些常见的应用场景。