User is typing

[NSA]

Hello.

So I'm working on my Chat application and I'm trying to implement a "%user% is typing..." function.
Now, I have it working to that when the user start's typing, it says they're typing.
But, I cannot figure how to get it to disappear.

Screenshot:

I'm not sure if I should just call a function every x seconds to clear who is typing and then when they keep typing it inserts again, but then it'd keep flashing on and off the page.

To try and put it simple, let's say there was a jQuery function called "user_stops_typing" and there were some attributes like "seconds" and you use it like so:

Pseudo: "User stops typing... wait 3 seconds, delete them from page".


If anyone can help me with this, it'd be greatly appreciated.

 

[Weasel]

Maybe you could do it like the DevBest shoutbox works, check every x seconds if someone is typing, if they are it shows, if they aren't it doesn't show.

 

[NSA]

DevBest shoutbox doesn't tell you when someone is typing?

 

[Weasel]

I know, I didn't mean that part, I mean the shoutbox checks every 5 seconds for shouts, maybe you can check every x seconds if someone is typing. Also I'm not sure, but maybe there is a script which checks if the input field isn't empty, and then it shows that they are typing, and when the input field is empty, it will not show. I guess this can all be done with Javascript/jQuery.

 

[NSA]

How I did the first part is, when keydown is initiated, jQuery sends the username and typing = 1 to a PHP page which then updates that in their username's row. The database is set like username, last_post, is_typing and online
When they start typing is_typing is set to 1. But I'm not sure how I can reset it to 0.

 

[Weasel]

You might want to take a look at this:

You must be registered for see links

Play around with that.

 

[NSA]

Managed to get this 'somewhat' working by using this:

var typingTimer;
var Interval = 5000;
 
 
$('#chatlol').keyup(function(){
    typingTimer = setTimeout(finTyping, Interval);
});
 
 
$('#chatlol').keydown(function(){
    clearTimeout(typingTimer);
});
 
 
function finTyping () {
    alert("Finished");
}

The only problem is, when the user finishes typing, the alert pops up three times, which means the ajax request would be sent three times. If MySQL tried removing something that didn't exist, pretty sure an error would be displayed.
Can you see why it's throwing it three times?

 

[Weasel]

Why should you use keyup? While I am typing this, I release the key a lot of times, and thought I still am typing my message. the Keyup event actives when you release any key on your keyboard. So, it isn't the best to use.

 

[NSA]

Still, when you finish typing is the most important part, and when you finish typing, you release the key and press the button.

 

[Weasel]

You always release a key, so it will give false information. Its like it now says "Finished", but I am still typing this part. If I was you, I still would check if the input field is empty or not. There are a lot of scripts which can do that, and it gives more accurate information. Because when you delete everything wat you are typing and leave it that way, the field is empty, so you aren't talking.