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

【问题标题】：How to check if a user has stopped typing in an input field?如何检查用户是否停止在输入字段中输入？
【发布时间】：2020-05-19 15:31:54
【问题描述】：

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

通过将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>';
})

【问题讨论】：

一种方法是在包装函数中使用 setInterval 以在输入完成后重复检查输入字段的值，如果按下 Enter 或输入恢复为空。

标签： javascript input socket.io indicator

【解决方案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

【讨论】：

我可以从小提琴中看到它的工作原理......我只是不明白如何。

【解决方案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... 文本

【讨论】：

这基本上是我所做的，并且有效 - 谢谢！