當用戶鍵入'@'時，我想開始一個操作（啓用自動完成）。但是我不知道如何正確地做到這一點。我有jQuery可用。使用JavaScript檢測輸入的字符

通常在QWERTY鍵盤上，它是這樣的：

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

然而，它沒有正確的AZERTY鍵盤上工作。 keyCode = 50對應於é~/2鍵。要在AZERTY鍵盤中鍵入'@'，它是AltGr + à@/0鍵。

編輯：我不清楚。自動完成在@輸入時開始，並且僅在此之後。例如，當有人輸入「Hello @」時，它會啓動，但是當他鍵入「Hello @nothing else」時，完成將不會執行任何操作。示例：http://mrkipling.github.com/jQuery-at-username/（僅適用於QWERTY鍵盤）。

來源

2012-08-26 jcisio

D'哦，我沒注意到什麼StackOverlow有什麼我需要在評論的用戶名自動完成功能。 – jcisio

使用keypress，而不是。雖然涉及每按一個鍵，keypress涉及到翻譯的字符，所以例如a可以不同於a而按下shift鍵，組成字符工作，死鎖工作，和其他鍵盤映射的差異處理。

來源

2012-08-26 22:07:04

正是！ 'keypress'事件正確檢測到'@'（64）的代碼。我想我必須分開兩個事件：一個檢測'@'字符，另一個使用'keydown'檢測「complete」部分的箭頭鍵。 – jcisio

我在autocompletes中完成了自己的組合。 –

@jcisio這是有道理的。但是，我不確定關於'keypress'的統一瀏覽器支持。 – VisioN

想到的唯一的其他選項是計時器，檢查文本輸入的內容。

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

此代碼將檢查#textInput元素的內容，看看它是否在字符串的開頭@符號的正則表達式匹配。如果確實如此，test()函數將評估爲true，並且您可以啓動自動完成代碼。

來源

2012-08-26 21:51:39 Lix

它應該在textarea的任何位置檢查@自動完成只在光標位於'@'字符後面時纔開始。我認爲仍然有可能驗證所有這些情況，但是有沒有更簡單的解決方案？ – jcisio

@jci - 你應該在你的主文章中提及關於光標位置的規範。此外，如果您想在字符串中的任何位置搜索該符號，只需移除符號「^」。 – Lix

如何檢查@是否作爲字段值中的最後一個字符輸入？

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

DEMO：http://jsfiddle.net/FKhPW/2/

來源

2012-08-26 21:55:19 VisioN

謝謝，它基本上做我想做的事情。有幾種情況，例如，當用戶完成一條消息時，然後移動到開始位置並添加'@username'，它將不起作用。我會盡力去適應它。 – jcisio

無法正常工作。它甚至爲後退鍵和換檔鍵開火 – Ashirvad

@jcisio是的，它可能需要一些修正。至少我沒有看到其他快速和有效的解決方案。 – VisioN

在這裏你去工作演示：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();      
       }); 
      } 
     },

來源

2012-08-26 22:05:15

謝謝，雖然我避免了jQuery UI（及其自動完成庫），但這個例子有一些智能點，就像它只獲取最後一個術語等。我正在爲以後的使用添加書籤。 – jcisio

@jcisio Cooleos'：）' –

使用`event.key`和現代JS，直接檢查`@`！

此應用沒有任何項目編號了。您可以直接檢查密鑰。

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

Mozilla Docs

Supported Browsers

來源

2018-02-18 19:38:31 Gibolt

使用JavaScript檢測輸入的字符

回答

使用event.key和現代JS，直接檢查@！

相關問題

使用`event.key`和現代JS，直接檢查`@`！