Question

我很难找到解决方案。

基本上，我想在有人输入@符号之后并且仅在其前面没有字符的情况下才调用函数，而且如果@符号是文本区域中写入的第一个字符，则也要运行该函数。

现在，我知道javascript中有onkeypress事件，并且我知道@符号unicode字符为64

所以我可以写一个像这样的函数。

keyPress(event) {
   if(event.keyCode === 64) {
      // Do Something
   }
}

但是如何检测@符号前是否有字符，我只是想知道这个keyPress事件是否可以在移动设备上正常工作？

编辑

仅是为了弄清楚textarea中是否使用了此方法，我已经看到您可以使用正则表达式，但显然它不适用于所有浏览器吗？我需要将其用于所有浏览器以及移动设备

编辑

这也必须在同一文本区域中多次工作，并且如果@符号是第一个键入的字符，请同时运行该功能

任何帮助将不胜感激！

Answer 1

一个相当合理的解决方案是侦听按键事件，如果字符是空格，则设置一个布尔标志，如果字符是@，则运行函数，并且设置标志以指示先前的字符是空格。空格，如果字符是其他字符，则重置标志。

继续您的示例：

let hasSpace = false;
keyPress(event) {
    if(event.keyCode === 32 || event.keyCode === 160) {
        hasSpace = true;
    } else if(event.keyCode === 64 && hasSpace) {
        hasSpace = false;
        // Do something, the previous character was a space
    } else {
        hasSpace = false;
    }
}

这将确保仅在当前字符为// Do something 并且前一个字符为空格的情况下运行@处的代码。请注意，我将32和160都用于空间，因为要考虑两种类型的空间：中断和不中断。

Answer 2

我试了一下，然后想到了

function checkVariable() {
  var textarea = document.getElementById("text").value;
  if (textarea.length > 2) {
    var text_length = textarea.length;
    if (textarea[text_length - 1] == "@") {
      if (textarea[text_length - 2].length == 0 || textarea[text_length - 2] == " ") {
        console.log("You typed a @ With a space behind it!");
      }
    }
  }
}

<textarea id="text" onkeyup="checkVariable()"></textarea>

我唯一不喜欢的是它同时在keyup和keydown上运行，我不记得使用适当的方法来防止香草JavaScript进行默认操作的情况。

Answer 3

我认为您应该使用正则表达式。 Regex.test()在所有浏览器中都可用，请参阅here。

const p=document.querySelector('p'), re=/(^@|\s@)/g;
function check(ta){
 p.innerHTML=re.test(ta.value)
    ? 'invalid input: '+ta.value.replace(re,'<b>$1</b>') // true
    : ''                                                 // false
}

b {color:red}

<h3>Please type sonme text with @:</h3>
<textarea id="myText" oninput="check(this)"></textarea><p></p>

这当然也可以在Codepen中进行演示，请参见here。

Answer 4

codepen：https://codepen.io/kfedorov91/pen/QByVKb

向keyup添加一个textarea事件侦听器，检查最后键入的字符是否为@，然后使用其{{ 1}}属性，然后使用该属性和textarea的值，可以确定最后键入的textarea之前的字符是否为空格。即使用户使用鼠标在文本区域中四处移动光标，此方法也有效；即使用户在文本区域中已经是多个selectionStart字符，也可以使用。

在按下某个字符后调用函数，但前提是要在空格前加一个空格

4 个答案: