jquery中oninput

原创

mob649e8166179a 2023-08-30 06:29:22 ©著作权

文章标签 输入框搜索应用场景 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8166179a的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery中的oninput

介绍

在前端开发中，我们经常需要对用户输入的文本进行实时的响应和处理。而jQuery中提供了一个非常常用的方法oninput，它可以用来监听输入框的输入事件，实现实时的文本处理和交互效果。

本文将详细介绍oninput的用法和相关知识，并通过代码示例演示其实际应用场景。

oninput的基本用法

oninput是一个事件绑定方法，可以将一个函数绑定到输入框的输入事件上。当用户在输入框中输入、删除或粘贴文本时，绑定的函数将被触发。

语法

$(selector).on('input', function(){
  // 执行相应的操作
});

其中，selector是用于选取目标输入框的jQuery选择器。

示例

下面是一个简单的示例，演示了如何使用oninput实现实时显示用户输入的内容：

<input type="text" id="input">
<div id="output"></div>

<script>
  $('#input').on('input', function(){
    var value = $(this).val();
    $('#output').text(value);
  });
</script>

在这个示例中，我们首先定义了一个输入框<input>和一个用于显示输入内容的<div>。然后，通过oninput方法将一个函数绑定到输入框的输入事件上。当用户在输入框中输入时，绑定的函数将被触发，从而将输入内容实时显示在<div>中。

实际应用场景

动态搜索

动态搜索是一个非常常见的应用场景，它可以让用户在输入框中输入关键字，并实时地从服务器获取匹配的结果进行展示。

下面是一个使用oninput实现动态搜索的示例：

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

<script>
  $('#search').on('input', function(){
    var keyword = $(this).val();
    
    // 发送Ajax请求，获取匹配的搜索结果
    $.ajax({
      url: '/search',
      type: 'GET',
      data: { keyword: keyword },
      success: function(data){
        // 清空原有的结果
        $('#results').empty();
        
        // 将获取到的结果添加到列表中
        data.forEach(function(result){
          $('#results').append('<li>' + result + '</li>');
        });
      }
    });
  });
</script>

在这个示例中，用户在输入框中输入关键字时，绑定的函数将会触发。函数首先获取输入框的内容，然后发送Ajax请求到服务器，将关键字作为参数传递。服务器返回匹配的搜索结果后，前端将结果渲染到一个列表中，实时展示给用户。

校验输入

oninput还可以用于校验用户的输入，并在用户输入不符合规定时进行提示。

下面是一个使用oninput进行输入校验的示例：

<input type="text" id="password">
<p id="hint"></p>

<script>
  $('#password').on('input', function(){
    var password = $(this).val();
    
    // 检查密码是否符合规定
    if (password.length < 6) {
      $('#hint').text('密码长度应不少于6位');
    } else {
      $('#hint').text('');
    }
  });
</script>

在这个示例中，用户在输入框中输入密码时，绑定的函数将会触发。函数首先获取输入框的内容，然后判断密码的长度是否小于6位。如果是，将在下方显示一条提示信息，告诉用户密码长度应不少于6位；如果不是，提示信息将会被清空。