如何使用javascript显示基于光标位置的下拉菜单？

Question

我是编程新手，想检查字符串在光标位置之前还是之后是否包含@字符。

如果@仅在输入字段中的光标位置之前出现，则在@之后获取完整的字符串。

如果@前和光标位置之后存在，则得到的字符串@ （即前光标位置的一个），直到空白。

字符串示例： "I am @u @user1" ，此处光标位置在索引8处。

我尝试了什么：我正在使用event.target.selectionStart来获取光标位置，然后是字符串中的lastindexOf('@') 。

if (event.target.selectionStart > event.target.value.lastIndexOf('@')) {
    /*this means there is no @ after cursor position*/
    string =    event.target.value.substr(event.target.value.lastIndexOf('@') +1);
}

但是我不确定如何确定光标位置之前是否还有另一个@字符，以及如何获取光标位置之前@之后的字符串。

我很困惑，不知道如何进一步。 有人可以帮我吗？ 谢谢。

Answer 1

好吧，您走在正确的轨道上。

您只需要在条件方面更具体。

 const test = document.querySelector('input'); test.addEventListener('keyup', function(event) { if (event.target.selectionStart > event.target.value.indexOf('@') && event.target.selectionStart > event.target.value.lastIndexOf('@')) { console.log(event.target.value.substring(event.target.value.indexOf('@'))); } if (event.target.selectionStart <= event.target.value.indexOf('@') && event.target.selectionStart <= event.target.value.lastIndexOf('@')) { console.log('after cursor'); } if (event.target.selectionStart > event.target.value.indexOf('@') && event.target.selectionStart <= event.target.value.lastIndexOf('@')) { console.log(event.target.value.substring(event.target.value.indexOf('@'), event.target.value.lastIndexOf('@'))); } }) 

 <input value="I am @u @user1">