【问题标题】：Detect entered character with JavaScript使用 JavaScript 检测输入的字符
【发布时间】：2012-08-21 11:32:01
【问题描述】：

我想在用户键入“@”时启动一个操作（启用自动完成）。我有可用的 jQuery。

通常在 QWERTY 键盘上是这样的：

$('textarea').live('keydown', function(e) {
  if (e.which === 50) {
    console.log('@ has been entered.');
  }
});

但是它不能在 AZERTY 键盘上正常工作。 keyCode = 50 对应于 é~/2 键。要在 AZERTY 键盘中输入“@”，它是 AltGr + à@/0 kbd> 键。

编辑：自动完成在输入 @ 时开始，并且仅在此之后。例如，当有人输入“Hello @”然后它开始，但是当他输入“Hello @nothing else”时，完整不会做任何事情。示例：http://mrkipling.github.com/jQuery-at-username/（仅适用于 QWERTY 键盘）。

【问题讨论】：

D'oh，我没有注意到 StackOverlow 的评论中的用户名自动完成功能正是我所需要的。

标签： javascript jquery events keyboard multilingual

【解决方案1】：

使用keypress 代替keydown。 keydown 与每次按键相关，keypress 与翻译字符相关，例如，a 可以不同于 a，而按下 shift 键，组合字符工作，死键工作，以及键盘映射中的其他差异。

【讨论】：

没错！ keypress 事件正确检测到@ (64) 的代码。我想我必须将这两个事件分开：一个检测@ 字符，另一个使用keydown 检测“完成”部分的箭头键。
@jcisio 这是有道理的。但是，我不确定keypress 的统一浏览器支持。
@VisioN 比统一浏览器对 keydown 和 keyup 的支持要好！
@VisioN 我不确定我是否正确理解你所说的。 jQuery 支持 keypress 事件，并且 event.which 也被 jQuery 跨浏览器规范化。
@jcisio 我的意思是如果所有浏览器（和操作系统）都会在keypress 上给你 64。我所有的人都这样做，但我仍然不确定。无论如何，正如 Jon 所说，它比 keydown 和 keyup 更好。

【解决方案2】：

如何检查@ 是否作为字段值的最后一个字符输入？

$("body").on("keyup", "textarea", function(e) {
    if (this.value.indexOf("@") == this.value.length - 1) {
        console.log("Starting autocomplete");
    }
});

演示： http://jsfiddle.net/FKhPW/2/

【讨论】：

谢谢，它基本上做了我想做的事。在某些情况下，例如，当用户完成一条消息，然后移至开头并添加“@username”时，它将不起作用。我会努力适应它。
@jcisio 是的，它可能需要一些更正。至少我没有看到任何其他快速且有效的解决方案。

【解决方案3】：

使用`event.key`和现代JS，直接检查`@`！

没有数字代码了。可以直接查key。

const input = document.getElementById("textarea");
input.addEventListener("keydown", function (event) {
    if (event.key === "@") {
        // Do something
    }
});

Mozilla Docs

Supported Browsers

【讨论】：

【解决方案4】：

想到的唯一其他选项是检查文本输入内容的计时器。

var patt=new RegExp(/^@/);
var charCheck = setInterval(function(){
  if (patt.test($("#textInput").val())){
    // initiate autocomplete
  }
},100);

此代码将检查#textInput 元素的内容，并查看它是否与字符串开头的@ 符号的正则表达式匹配。如果是这样，test() 函数将评估为 true，您可以启动自动完成代码。

【讨论】：

它应该在文本区域的任何地方检查@，并且自动完成仅在光标正好在'@'字符之后开始。我认为仍然可以验证所有这些条件，但是有没有更简单的解决方案？
@jci - 您应该在主帖中提及有关光标位置的规范。此外，如果您想在字符串中的任何位置搜索该符号，只需删除 ^ 符号。

【解决方案5】：

开始工作演示： http://jsfiddle.net/LxpQQ/

来自我的旧回复：

jquery autocomplete using '@'

希望它适合你，因为:)

代码

source: function(request, response) {
            if (request.term.indexOf("@") >= 0) {
                $("#loading").show();
                getTags(extractLast(request.term), function(data) {
                    response($.map(data.tags, function(el) {
                        return {
                            value: el.name,
                            count: el.count
                        }
                    }));
                    $("#loading").hide();                    
                });
            }
        },

【讨论】：

谢谢，虽然我避免使用 jQuery UI（及其自动完成库），但这个示例有一些智能点，比如它只获取最后一个术语等。我正在为以后使用添加书签。

使用event.key和现代JS，直接检查@！

使用`event.key`和现代JS，直接检查`@`！