时间戳

首页 > 解决方案 > 是否可以通过键入单词来触发事件？

jquery - 是否可以通过键入单词来触发事件？

问题描述

是否可以在输入单词的那一刻触发事件（不使用输入字段）？

我正在处理的网站上的某些元素具有类.hidden_elements（显示：无）。.open在（在任何给定时间）键入单词“hello”之后，如何将类（显示：块）添加到那些隐藏元素中。

我一直在尝试这种方法，但没有运气：

$(document).ready(function() {
  'use strict';
  $('body').on('keyup', function() {
    if(this.value.trim().toLowerCase() == 'hello'){
      $('.hidden_elements').addClass('open');
    }
  });
});
.hidden_elements {
  display:none;
}

.open {
  display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hidden_elements">I am hidden</div>

<div class="hidden_elements">I am hidden</div>

标签： jquery

解决方案

行。以下代码段已经奏效。

将采取以下步骤

  1. 读取事件数据本身而不是this.value. this.valueonbody仍然未定义
  2. 收集使用键盘输入的字符event.originalEvent.key
  3. 缓冲区buff长度等于或大于 5 后，检查最后 5 个输入的字符是否与单词 'hello'
  4. 输入后，它会通过添加类hello来显示 divopen

$(document).ready(function() {
  'use strict';
  let buff = '';
  $('body').on('keyup', function(event) {
    
    
    buff += event.originalEvent.key;
    // console.log('buff.length', buff.length, buff);
    if (buff.length >= 5) {
      const lastFive = buff.substr(buff.length - 5);
      if(lastFive.toLowerCase() == 'hello') {
        $('.hidden_elements').addClass('open');
      }
    }
  });
});
.hidden_elements {
  display:none;
}

.open {
  display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hidden_elements">I am hidden</div>

<div class="hidden_elements">I am hidden</div>

推荐阅读