ajax – 聊天中的“用户正在键入”功能

前端之家收集整理的这篇文章主要介绍了ajax – 聊天中的“用户正在键入”功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正试图在聊天中添加一个“用户正在键入”功能;用 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>

问题:

>如果我停下来几秒钟想想我的拼写,看起来我已经停止打字了.有没有更多的相关性和较不复杂的方式来设置这个功能?是否有可能的代码

>文本框不为空(用户按任意键,因此开始输入) – >消息:用户正在键入.
>文本框空 – >消息:用户没有打字.
>文本框不为空,但用户没有按任何键超过5秒 – >消息:用户没有打字.

它向我显示我正在打字;如何实现它或在哪里,为了在我的聊天框中看到“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);

猜你在找的Ajax相关文章