Question

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

我正在处理的网站上的某些元素具有 .hidden_elements 类（显示：无）。在（在任何给定时间）输入“hello”这个词之后，如何将 class .open (display: block) 添加到这些隐藏元素中。

我一直在尝试这种方法，但运气不佳：

$(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>

Answer 1

好的。以下代码段有效。

需要采取以下步骤

读取事件数据本身而不是 The quick brown 。 this.value 上的 this.value 仍未定义
使用 body 收集键盘上输入的字符
缓冲区 event.originalEvent.key 长度等于或大于 5 后，根据单词 'hello' 检查最后输入的 5 个字符
只要您输入 buff，它就会通过添加 hello 类来显示 div

open

$(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;
}

Answer 2

$(document).ready(function () {
    (function () {
        'use strict';
        var typed = "", observe = "hello";
        $(document).on('keypress', function (e) {
            typed += String.fromCharCode(e.keyCode || e.which).toLowerCase();
            if (observe.indexOf(typed) != 0) {
                typed = "";
            }
            if (observe == typed) {
                $('.hidden_elements').addClass('open');
                typed = "";
            }
        });
    }());
});

.hidden_elements {
    display: none;
}

.open {
    display: block;
}

<p>Type Hello</p>

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

是否可以通过输入单词来触发事件？

2 个答案: