如何检查用户是否已停止在输入字段中输入？

Question

我有一个指示器，当另一个用户正在输入时通过查找输入框上的按键来通知用户。但是，如果用户删除了他们正在输入的内容，指示器仍会向其他用户显示他们仍在输入。当输入字段为空时，如何更改它以删除指示器。

发送消息时，通过将istyping设置为空字符串，指示器将消失。我不确定如何利用它来检测空输入字段。

var message = document.getElementById('messagebox');
var istyping = document.getElementById('istyping');

message.addEventListener('keypress', function(){
    socket.emit('typing', {
        user: user || 'Anonymous'
    })
})

socket.on('typing', function(data){
    istyping.innerHTML = '<p><i>'+ data.user +" is typing..."+'</p></i>';
})

Answer 1

您可以使用 setTimeout() 来完成。

示例：

var message  = document.getElementById('messagebox');
var istyping = document.getElementById('istyping');
var timeout  = setTimeout(function(){}, 0);


message.addEventListener('keypress', function(){
  clearTimeout(timeout); /// clear timeout if user is typing
  istyping.innerHTML = 'User is typing';
  timeout = setTimeout(function() 
    { istyping.innerHTML = '' }, 1000 /// Time in milliseconds
)}
)

这基本上表示，如果在 X 毫秒后未按下某个键，则用户未在键入。您可以检查它是否正常工作 here

Answer 2

您可以为此使用 setTimeout。一旦用户在输入字段中输入任何字符，就设置一个新的超时并清除旧的超时。您可以根据自己的喜好设置时间。

var message = document.getElementById('messagebox');
var istyping = document.getElementById('istyping');
var typingInterval = 3000;
var typingTimer;
message.addEventListener('keypress', function(){
clearInterval(typingTimer);
typingTimer = setTimeout(doneTyping, typingInterval)
socket.emit('typing', {
    user: user || 'Anonymous'
  })
})

function doneTyping () {
    socket.emit('doneTyping',{
        user: user || 'Anonymous'
    })
}
socket.on('typing', function(data){
    istyping.innerHTML = '<p><i>'+ data.user +" is typing..."+'</p></i>';
})
socket.on('doneTyping', function(data){
    istyping.innerHTML = '';
})

如果用户在 3 秒内未输入任何内容

，此解决方案将从 UI 中删除 is Typing... 文本

如何检查用户是否已停止在输入字段中输入？

How to check if a user has stopped typing in an input field?

javascript

input

indicator

socket.io