jQuery input事件|极客教程

jQuery input事件

在前端开发中，处理用户输入是非常常见的需求。jQuery提供了一系列的事件来帮助我们监听和处理用户输入，其中最常用的就是input事件。input事件会在input、textarea等表单元素的值发生变化时触发，让我们可以实时获取用户输入的内容并进行相应的处理。

监听input事件

我们可以使用jQuery的on()方法来监听input事件，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery input事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input">
<div id="output"></div>

<script>
(document).ready(function(){('#input').on('input', function(){
    ('#output').text((this).val());
  });
});
</script>
</body>
</html>

Output:

jQuery input事件

在这个示例中，我们监听了一个input元素的input事件，当用户在输入框中输入内容时，会将输入的内容实时显示在页面上。

获取输入框的值

除了实时显示用户输入的内容，我们还可以通过input事件来获取输入框的值。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery input事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input">
<button id="btn">获取输入框的值</button>
<div id="output"></div>

<script>
(document).ready(function(){('#btn').click(function(){
    var value = ('#input').val();('#output').text('输入框的值为：' + value);
  });
});
</script>
</body>
</html>

Output:

jQuery input事件

在这个示例中，我们通过点击按钮来获取输入框的值，并将其显示在页面上。

阻止默认行为

有时候我们需要在用户输入内容时进行一些处理，但又不希望输入框的值发生变化，这时可以通过阻止默认行为来实现。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery input事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input">
<div id="output"></div>

<script>
(document).ready(function(){('#input').on('input', function(e){
    e.preventDefault();
    ('#output').text('输入框的值为：' +(this).val());
  });
});
</script>
</body>
</html>

Output:

jQuery input事件

在这个示例中，我们通过调用preventDefault()方法来阻止输入框的值发生变化，同时仍然可以获取输入框的值并进行处理。

实时搜索

input事件还可以用于实现实时搜索功能，当用户在搜索框中输入内容时，会实时显示匹配的结果。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery input事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input">
<ul id="list"></ul>

<script>
(document).ready(function(){('#input').on('input', function(){
    var keyword = (this).val();('#list').empty();
    if(keyword){
      for(var i = 0; i < 5; i++){
        $('#list').append('<li>' + keyword + i + '</li>');
      }
    }
  });
});
</script>
</body>
</html>

Output:

jQuery input事件

在这个示例中，当用户在输入框中输入内容时，会实时显示匹配的结果，最多显示5条。

输入框限制

有时候我们需要对输入框的内容进行限制，比如只能输入数字或者限制输入的长度。我们可以通过input事件来实现这些功能。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery input事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input">
<div id="output"></div>

<script>
(document).ready(function(){('#input').on('input', function(){
    var value = (this).val();
    if(isNaN(value)){(this).val('');
      ('#output').text('请输入数字');
    }else if(value.length>5){(this).val(value.slice(0, 5));
      ('#output').text('最多输入5位数字');
    }else{('#output').text('');
    }
  });
});
</script>
</body>
</html>

Output:

jQuery input事件

在这个示例中，我们限制了输入框只能输入数字，并且最多只能输入5位数字。

输入框联动

有时候我们需要多个输入框之间进行联动，比如一个输入框的值发生变化时，另一个输入框的值也会相应变化。我们可以通过input事件来实现这种联动效果。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery input事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input1">
<input type="text" id="input2">

<script>
(document).ready(function(){('#input1').on('input', function(){
    ('#input2').val((this).val());
  });
});
</script>
</body>
</html>

Output:

jQuery input事件

在这个示例中，当第一个输入框的值发生变化时，第二个输入框的值也会相应变化。

输入框自动补全

有时候我们需要在用户输入内容时自动补全一些内容，比如输入邮箱地址时自动补全@geek-docs.com。我们可以通过input事件来实现这种自动补全功能。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery input事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input">

<script>
(document).ready(function(){('#input').on('input', function(){
    var value = (this).val();
    if(value.indexOf('@') === -1){(this).val(value + '@geek-docs.com');
    }
  });
});
</script>
</body>
</html>

Output:

jQuery input事件

在这个示例中，当用户输入内容时，如果没有@符号，则自动补全@geek-docs.com。

输入框验证

有时候我们需要对用户输入的内容进行验证，比如邮箱地址的格式是否正确。我们可以通过input事件来实现这种验证功能。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery input事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input">
<div id="output"></div>

<script>
(document).ready(function(){('#input').on('input', function(){
    var value = (this).val();
    var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}/;
    if(pattern.test(value)){
      ('#output').text('邮箱格式正确');
    }else{('#output').text('邮箱格式错误');
    }
  });
});
</script>
</body>
</html>

Output:

jQuery input事件

在这个示例中，我们使用正则表达式来验证用户输入的内容是否符合邮箱地址的格式。

输入框联想

有时候我们需要在用户输入内容时提供一些联想的选项，比如输入关键词时显示相关的搜索结果。我们可以通过input事件来实现这种联想功能。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery input事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input">
<ul id="list"></ul>

<script>
(document).ready(function(){('#input').on('input', function(){
    var keyword = (this).val();('#list').empty();
    if(keyword){
      for(var i = 0; i < 5; i++){
        $('#list').append('<li>' + keyword + i + '</li>');
      }
    }
  });
});
</script>
</body>
</html>

Output:

jQuery input事件

在这个示例中，当用户输入内容时，会显示相关的联想选项，最多显示5条。

输入框计数

有时候我们需要对用户输入的内容进行计数，比如输入框中还可以输入多少个字符。我们可以通过input事件来实现这种计数功能。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery input事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input">
<div id="count"></div>

<script>
(document).ready(function(){('#input').on('input', function(){
    var count = (this).val().length;('#count').text('已输入' + count + '个字符');
  });
});
</script>
</body>
</html>

Output:

jQuery input事件

在这个示例中，当用户输入内容时，会实时显示已输入的字符数。

输入框清空

有时候我们需要在用户输入内容后点击清空按钮来清空输入框的内容。我们可以通过input事件来实现这种清空功能。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery input事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input">
<button id="clear">清空</button>

<script>
(document).ready(function(){('#input').on('input', function(){
    ('#clear').show();
  });('#clear').click(function(){
    ('#input').val('');(this).hide();
  });
});
</script>
</body>
</html>

Output:

jQuery input事件

在这个示例中，当用户输入内容时，会显示清空按钮，点击清空按钮可以清空输入框的内容。

输入框回车提交

有时候我们需要在用户在输入框中按下回车键时提交表单。我们可以通过input事件来实现这种回车提交功能。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery input事件</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input">

<script>
(document).ready(function(){('#input').on('input', function(e){
    if(e.keyCode === 13){
      // 提交表单的逻辑
      alert('提交表单');
    }
  });
});
</script>
</body>
</html>