前端输入框简单实现检测@成员输入

大体逻辑是

  1. 给input框添加一个input监听,并判断输入是否为@
  2. 获取当前光标的位置,你输入的@肯定在光标之前,且肯定是最后一个@
  3. input输入的内容换行可以被认为空格,需要进行全局替换
  4. 判断@成功的逻辑分为两部分,前方一般来说是为空或者@index的下标为0,后方的判断是到下一个间隔(空格)之间不能存在@,这个主要看产品需求,一般情况是这样
     //获取dom,并添加input监听
     this.$refs.input.addEventListener('input', (event) => {
     //判断
      if (event.data === '@') {
      	//获取当前焦点位置
        const selectionStart = event.srcElement.selectionStart;
        //将输入值的换行替换成 空格
        const value = this.newComment.replace(/[\r\n]/g, ' ');
        //获取到当前焦点位置最后一个@
        const start = value.lastIndexOf('@', selectionStart);
        //获取从焦点位置后第一个空格的下标
        const fistSpaceIndexFromStart = value.indexOf(' ', selectionStart);
        //能够找到就用第一个空格的下标否则就找到最后
        const end = fistSpaceIndexFromStart > -1 ? fistSpaceIndexFromStart : value.length;
        //获取到@之后到下一个间隔之间的内容
        const termWithTrigger = value.substring(start, end);
		//前方的判断-不包含index为0的情况
        const startBeforeHasSpace = start > 0 && value[start - 1] === ' ';
        if (
          (startBeforeHasSpace || start === 0) &&
          !termWithTrigger.includes(' ') &&
          !termWithTrigger.includes('@', 1)
        ) {
         	//todo
         	//@成功之后要做的事情
        }
      }
    });

你可能感兴趣的:(前端,vue)