Question

我正在创建一个textarea来创建帖子，如果我输入@再添加一个字母，那么它会显示一个alert（），它将被像twitter这样的内联用户搜索栏取代（我已经有它）。

  <textarea id=post></textarea>

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

我正在使用此功能，它识别@，但如果继续写其他内容，警报会继续显示。我想要的是在写@之后出现警报，另一封信使内联搜索栏工作。

Answer 1

我为你制作了一个小片段。

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

另外，我从“lastChar”检查了你的indexOf（“@”）。这允许您在同一文本区域中多次激活标记功能。

喜欢“嘿@Jean，我是@NiMusco，希望它可以帮到你”。

当然可以改进，但举例来说没问题。

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后发出警报

1 个答案: