如何在jQuery的keyup()中设置if条件实现输入状态切换提示

该需求完全可以正常实现，你写的代码无法运行主要有三个核心问题：

• 选择器错误：获取id为txtInput的元素需要使用id选择器，你写的$('txtInput')没有加#前缀，只会匹配标签名为txtInput的不存在的元素，无法选中目标输入框。
• 缺少事件绑定：你的代码仅在页面首次加载时执行一次判断，不会监听后续用户的输入操作，自然无法动态更新状态文本。
• 没有停止输入判断逻辑：没有设置逻辑判断用户是否已经结束输入，无法实现无操作后自动恢复为online状态的效果。

<label id="statusLabel">Online</label>
<input type="text" id="txtInput">

<script>
// 配置停止输入后恢复状态的等待时长，单位：毫秒
const TYPE_STOP_DELAY = 1000
let inputTimer = null

// 绑定输入相关事件，覆盖打字、粘贴、剪切等所有修改输入内容的操作
$('#txtInput').on('input keydown keyup', function() {
    // 每次触发输入操作时清空上一次的定时器
    clearTimeout(inputTimer)
    // 修改状态为输入中
    $('#statusLabel').text('typing...')
    // 启动新定时器，等待指定时长无输入后恢复状态
    inputTimer = setTimeout(() => {
        $('#statusLabel').text('online')
    }, TYPE_STOP_DELAY)
})
</script>

注意：使用上述代码前请确保页面已经正确引入jQuery库

你可以根据自己的需求修改TYPE_STOP_DELAY的数值，调整停止输入后多久恢复为online状态。

内容的提问来源于stack exchange，提问作者Mishen Thakshana