ajax – 聊天中的“用户正在键入”功能
发布时间:2020-12-16 03:05:48 所属栏目:百科 来源:网络整理
导读:我正试图在聊天中添加一个“用户正在键入”功能;用 PHP MySQL / Ajax编写的聊天. 应该如何工作: – 当我的聊天伙伴X开始打字时,我在聊天框中看到:“X正在键入” – 当我(命名为Y)打字时,他在他的聊天框中看到:“Y正在输入”(就像Yahoo Messenger). 我已经
我正试图在聊天中添加一个“用户正在键入”功能;用
PHP MySQL / Ajax编写的聊天.
应该如何工作: – 当我的聊天伙伴X开始打字时,我在聊天框中看到:“X正在键入” – 当我(命名为Y)打字时,他在他的聊天框中看到:“Y正在输入”(就像Yahoo Messenger). 我已经尝试的代码到目前为止: <script type="text/javascript" language="javascript"> var timer = 0; function reduceTimer() { timer = timer - 1; isTyping(true); } function isTyping(val) { if (val == 'true') { document.getElementById('typing_on').innerHTML = "User is typing..."; } else { if (timer <= 0) { document.getElementById('typing_on').innerHTML = "No one is typing -blank space."; } else { setTimeout("reduceTimer();",500); } } } </script> <label> <textarea onkeypress="isTyping('true'); timer=5;" onkeyup="isTyping('false')" name="textarea" id="textarea" cols="45" rows="5"></textarea> </label> <div id="typing_on">No one is typing -blank speace.</div> 问题: >如果我停下来几秒钟想想我的拼写,看起来我已经停止打字了.有没有更多的相关性和较不复杂的方式来设置这个功能?是否有可能的代码: >文本框不为空(用户按任意键,因此开始输入) – >消息:用户正在键入. 它向我显示我正在打字;如何实现它或在哪里,为了在我的聊天框中看到“X用户正在键入”而不是“我自己正在键入”.对于其他用户来说,他应该收到一个关于我打字/不打字的消息,而不是关于他自己. 谢谢.
我创建了一个可能对你有帮助的
fiddle.想法是使用javascript setInterval函数刷新活动消息.
var textarea = $('#textarea'); var typingStatus = $('#typing_on'); var lastTypedTime = new Date(0); // it's 01/01/1970,actually some time in the past var typingDelayMillis = 5000; // how long user can "think about his spelling" before we show "No one is typing -blank space." message function refreshTypingStatus() { if (!textarea.is(':focus') || textarea.val() == '' || new Date().getTime() - lastTypedTime.getTime() > typingDelayMillis) { typingStatus.html('No one is typing -blank space.'); } else { typingStatus.html('User is typing...'); } } function updateLastTypedTime() { lastTypedTime = new Date(); } setInterval(refreshTypingStatus,100); textarea.keypress(updateLastTypedTime); textarea.blur(refreshTypingStatus); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |