Menu
I'm trying to add in chat a "user is typing" function; chat written in PHP + MySQL/Ajax.
How it should work:
-when my chat partner X starts typing I see in my chat box: "X is typing"
-when I (named Y) am typing he sees in his chat box: "Y is typing" (just like Yahoo Messenger).
The code I've tried so far:
<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>
Questions:
If I stop for a few seconds to think about my spelling it looks like I've stopped typing. Is there a more relevant and less complicated way to set this function? Is there possible a code for:
It shows to myself that I am typing; how could I implement it or where, in order to see in my chat box the "X user is typing" and not "Myself is typing". Same for the other user, he should get a message about me typing/not typing , not about himself.
Thank you.
927
I have created a fiddle that might be helpful to you. The idea is to refresh activity message using javascript setInterval function.
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);
<script>
function isTyping() {
document.getElementById('typing_on').innerHTML = "User is typing...! "; }
function notTyping (){
document.getElementById('typing_on').innerHTML = "No one is typing ! "; }
</script>
<label>
<textarea onkeypress="setTimeout(isTyping(),4000); setInterval(notTyping,5000)" name="textarea" id="textarea" cols="45" rows="5"></textarea>
</label>
<div id="typing_on">No one is typing -blank speace.</div>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function isTyping() {
document.getElementById('typing_on').innerHTML = "User is typing...! "; }
function notTyping (){
document.getElementById('typing_on').innerHTML = "No one is typing ! "; }
</script>
<label>
<textarea onkeypress="setTimeout(isTyping(),4000); setInterval(notTyping,5000)" name="textarea" id="textarea" cols="45" rows="5"></textarea>
</label>
<div id="typing_on">No one is typing -blank speace.</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
