按键，按键和按键的计时

Question

I am making a user tagging method inside the chat bar of a game that implements suggested text. When a player types "@" followed by letters/numbers, suggested usernames will popup highlighted and selected, sorta like the Google search bar. I have a simple demo working below.

My problem is the timing of the event listener. I wanted to use the "keypress" event so that only printable characters prompt the suggestion, but then the suggestion is inserted and selected before the pressed key is rendered, causing the suggestion to be instantly deleted. In my demo I defaulted back to "keyup", but now there is a noticeable lag and non-printable keys fire the event (making backspacing/deleting and navigation with arrows impossible).

How can I get both the right timing and prevent non-printable characters?

 var users = ["benjamin", "nick", "joe", "tyler"]; $input = $("#input"); $input.focus(); $input.on("keyup", function() { var message = $input.text(); var pattern = /^[@]([a-zA-Z0-9]{1,16})$/; if(pattern.test(message)) { var username = pattern.exec(message); var matches = []; users.forEach(function(element) { if(element.indexOf(username[1]) == 0) matches.push(element); }); if(matches.length) { $input.text("@" + matches[0]); var textNode = $input.get(0).childNodes[0]; var range = document.createRange(); range.setStart(textNode, message.length); range.setEnd(textNode, matches[0].length + 1); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } } }); 

 #input { border: 2px solid black; padding: 2px 4px; width: 200px; box-sizing: border-box; } #input:focus { outline: none; box-shadow: 5px 5px 5px #aaa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="input" contenteditable="true"></div> 

Answer 1

I found something that works smoothly, however it only works well in a content editable <div> rather than an <input> .

 var users = ["benjamin", "nick", "joe", "tyler"]; $input = $("#input"); $input.focus(); $input.on("keypress", function(event) { var highlight = window.getSelection().toString(); var message = $input.text(); message = message.replace(highlight, ""); message += event.key; var pattern = /^[@]([a-zA-Z0-9]{1,16})$/; if(pattern.test(message)) { var username = pattern.exec(message); var matches = []; users.forEach(function(element) { if(element.indexOf(username[1]) == 0) matches.push(element); }); if(matches.length) { event.preventDefault(); $input.text("@" + matches[0]); var textNode = $input.get(0).childNodes[0]; var range = document.createRange(); range.setStart(textNode, message.length); range.setEnd(textNode, matches[0].length + 1); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } } }); 

 #input { border: 2px solid black; padding: 2px 4px; width: 200px; box-sizing: border-box; } #input:focus { outline: none; box-shadow: 5px 5px 5px #aaa; } #input::selection { background-color: #d8d8d8; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="input" contenteditable="true"></div>