jQuery 来处理常见的输入框的事件

王小婷

发布于 2023-09-23 09:13:59

4190

发布于 2023-09-23 09:13:59

文章被收录于专栏：编程微刊

jQuery (简称为 jq) 来处理输入框的事件。

以下是常见的 input 输入框事件的 jQuery 代码示例：

input 事件：

$('#myInput').on('input', function() {
  console.log('Input value changed:', $(this).val());
});

change 事件：

$('#myInput').on('change', function() {
  console.log('Input value changed:', $(this).val());
});

focus 事件：

$('#myInput').on('focus', function() {
  console.log('Input focused');
});

blur 事件：

$('#myInput').on('blur', function() {
  console.log('Input blurred');
});

keydown 事件：

$('#myInput').on('keydown', function(event) {
  console.log('Key pressed:', event.key);
});

keyup 事件：

$('#myInput').on('keyup', function(event) {
  console.log('Key released:', event.key);
});

keypress 事件：

$('#myInput').on('keypress', function(event) {
  console.log('Character typed:', event.key);
});

paste 事件：

$('#myInput').on('paste', function(event) {
  const pastedText = event.originalEvent.clipboardData.getData('text');
  console.log('Pasted text:', pastedText);
});

cut 事件：

$('#myInput').on('cut', function() {
  console.log('Text cut');
});

select 事件：

$('#myInput').on('select', function() {
  const selectedText = $(this).val().substring(this.selectionStart, this.selectionEnd);
  console.log('Selected text:', selectedText);
});

这些示例中，#myInput 是一个具有相应事件的输入框的选择器。

根据实际情况修改选择器以匹配你的输入框。通过调用 .on() 方法来绑定事件，并提供一个事件处理函数。当事件触发时，相应的函数将执行。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

jquery