分享
三行代码  ›  专栏  ›  技术社区  ›  Smokey Dawson

在按下某个字符后调用函数,但前提是手前有空格

  •  2
  • Smokey Dawson  · 技术社区  · 1 年前

    我很难想出解决这个问题的办法。

    基本上,我想在有人输入了@符号之后调用一个函数,并且仅当前面没有字符时,而且如果@符号是在文本区域中写入的第一个字符,那么也要运行该函数。

    现在我知道在javascript中有onkeypress事件,@symbols unicode字符是 64

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

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

    但是我该如何检测@符号之前是否有字符,我只是想知道这个按键事件在移动设备上是否可以正常工作??

    编辑

    只是为了澄清这一点 textarea ,我看到你可能会使用regex,但显然它不适用于所有broswers??我需要它适用于所有浏览器和移动设备

    编辑

    这还必须在同一文本区域中多次工作,如果@符号是键入的第一个字符,则运行函数

    任何帮助都将不胜感激!

    4 回复  |  直到 1 年前
        1
  •  1
  •   kfedorov91    1 年前

    代码笔: https://codepen.io/kfedorov91/pen/QByVKb

    添加一个 keyup 事件侦听器 textarea ,检查最后键入的字符是否是 @ 然后从 文本区域 使用它 selectionStart 属性,然后使用该属性和文本区域的值,可以确定最后一次键入之前的字符 @ 是一个空间。即使用户使用鼠标在文本区域中移动光标,这也可以工作,即使它们是多个,也可以工作。 @ 文本区域中的字符已存在。

        2
  •  1
  •   TheEnvironmentalist    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 对于空间,因为有两种类型的空间需要考虑,即断开和不断开。

        3
  •  1
  •   Luay Wadie    1 年前

    我试了一下,然后想到了这个

    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来防止默认操作。

        4
  •  1
  •   cars10m    1 年前

    在我看来你 应该 使用正则表达式。 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>

    当然,这也可以在代码笔中演示,请参见 here .