输入 @ 后加一个字母后提醒 Jquery

Question

我正在创建一个文本区域来创建帖子，如果我在其中键入 @ 再加一个字母，则会出现一个警报 ()，它将被一个内联用户搜索栏取代，例如 twitter (我已经有了）。

  <textarea id=post></textarea>

       $(function() {
         $('#post').keyup(function() {
             if ( $(this).val().indexOf("@") > -1 ) {
                 alert("found");
              }
            });
      });

我正在使用这个功能，它识别 @ 但如果继续写其他东西，警报会继续出现。我想要的是在写入 @ 和另一个使内联搜索栏工作的字母后出现警报。

Answer 1

我为你做了一个片段。

这使用 "count" 检查文本区域中的字符数量是否发生变化。因为可以使用 "AltGr+2"（2 个按键）或 "Alt+64"（3 个按键）来制作“@”。下面的代码避免了可以用这种方式形成的 ASCII 字符的问题。

此外，我从 "lastChar" 而不是您的 indexOf("@") 进行了检查。这允许您在同一个文本区域中多次触发您的标签功能。

喜欢"Hey @Jean, I'm @NiMusco and hope it helps you"。

当然可以改进，但是举个例子就可以了。

var count = 0;
var tagging = false;
var users_example = ["jean", "nimusco"];

$('#post').keyup(function(){
  var text = $(this).val();
  
  if(text.length > count){
    var lastChar = text.substr(count);
    
    if(lastChar == "@"){
      tagging = true;
    }
    
    //White space break the tagging.
    if(lastChar == " "){
      tagging = false;
    }
    
    //Adapt this to your tagging function
    if(tagging == true){
      var username = text.substr(text.lastIndexOf('@') + 1, text.length);
      console.log(username);
      if($.inArray(username.toLowerCase(), users_example) !== -1){
        alert('found it!');
        tagging = false;
      }
    }
  }
  
  count = text.length;
});

#post{
width:300px;
height:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="post">

</textarea>

输入 @ 后加一个字母后提醒 Jquery

alert after typing @ plus one more letter Jquery

jquery

indexof

keyup