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

2023-09-23 09:13:59 浏览数 (1)

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

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

input 事件:

代码语言:javascript复制
$('#myInput').on('input', function() {
  console.log('Input value changed:', $(this).val());
});

change 事件:

代码语言:javascript复制
$('#myInput').on('change', function() {
  console.log('Input value changed:', $(this).val());
});

focus 事件:

代码语言:javascript复制
$('#myInput').on('focus', function() {
  console.log('Input focused');
});

blur 事件:

代码语言:javascript复制
$('#myInput').on('blur', function() {
  console.log('Input blurred');
});

keydown 事件:

代码语言:javascript复制
$('#myInput').on('keydown', function(event) {
  console.log('Key pressed:', event.key);
});

keyup 事件:

代码语言:javascript复制
$('#myInput').on('keyup', function(event) {
  console.log('Key released:', event.key);
});

keypress 事件:

代码语言:javascript复制
$('#myInput').on('keypress', function(event) {
  console.log('Character typed:', event.key);
});

paste 事件:

代码语言:javascript复制
$('#myInput').on('paste', function(event) {
  const pastedText = event.originalEvent.clipboardData.getData('text');
  console.log('Pasted text:', pastedText);
});

cut 事件:

代码语言:javascript复制
$('#myInput').on('cut', function() {
  console.log('Text cut');
});

select 事件:

代码语言:javascript复制
$('#myInput').on('select', function() {
  const selectedText = $(this).val().substring(this.selectionStart, this.selectionEnd);
  console.log('Selected text:', selectedText);
});

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

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

0 人点赞