Fonction "l'utilisateur tape" dans le chat
j'essaie d'ajouter dans le chat une fonction "user is typing"; chat écrit en PHP + MySQL/Ajax.
Comment cela devrait fonctionner:
- quand mon partenaire de chat X commence à taper, je vois dans ma boîte de chat: "X tape"
- quand je (y nommé) suis en train de taper il voit dans sa boîte de chat: "Y est en train de taper" (comme Yahoo Messenger).
Le code que j'ai essayé jusqu'à présent:
<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:
si je m'arrête quelques secondes pour penser au sujet de mon orthographe on dirait que j'ai arrêté de taper. Est-il plus pertinent et moins compliqué pour définir cette fonction? Est-il possible qu'un code par:
- zone de texte non vide (l'Utilisateur a appuyé sur n'importe quelle touche pour commencer à taper) -> Message: L'utilisateur tape.
- zone de texte vide -> Message: L'utilisateur ne tape pas.
- zone de texte n'est pas vide, mais l'utilisateur n'a pas appuyé sur aucune touche pendant plus de 5 secondes -> Message: l'Utilisateur n'est pas taper.
Il me montre à moi-même que je suis en train de taper; Comment pourrais-je l'implémenter ou où, pour voir dans ma boîte de chat "l'utilisateur x tape" et non "moi-même tape". Pareil pour l'autre utilisateur, il devrait recevoir un message sur moi tapant/ne tapant pas , pas sur lui-même.
je vous Remercie.
4 réponses
j'ai créé un tripoter cela pourrait vous être utile. L'idée est de rafraîchir le message d'activité en utilisant javascript setInterval fonction.
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>
Vous pouvez utiliser JQuery pour gérer l'événement keypress au lieu de HTML. Vous pourriez essayer quelque chose comme ça. Ensuite, définissez votre #typing par défaut sur div car L'utilisateur n'est pas en train de taper.
//EXECUTES WHEN KEY IS PRESSED IN SPECIFIED ELEMENT
$("#textarea").keypress(function(){
numMiliseconds = 500;
//THIS IF STATEMENT EXECUTES IF USER CTRL-A DELETES THE TEXT BOX
if ($("textarea") == ""){
$("#typing_on").text("User has cleared the text box");
}
$("#typing_on").text("User is typing").delay(numMiliseconds).queue(function(){
$("#typing_on").text("User has stopped typing");
}
});
Theres une chouette bibliothèque de plug-in appelé trait de soulignement.js
parmi ses nombreuses fonctions utiles, il y en a une qui s'appelle _.anti-rebond, qui peut être utilisé comme afin de suivre en tapant:
var typing, typingStarted, typingStopped;
typing = false;
typingStopped = _.debounce((function() {
if (!typing) {
return;
}
typing = false;
console.log('typing is done so do what ever you need to do to notify it');
}), 5000);
typingStarted = function() {
if (this.typing) {
return;
}
typing = true;
console.log('typing has started so do what ever you need to do to notify it');
};
document.querySelector("textarea").oninput = function(event) {
typingStarted();
typingStopped();
return
};
la façon dont cela fonctionne est que sur l'entrée de la zone de texte typingStarted est appelé et définit la dactylographie à true l'empêchant d'être appelé à nouveau. typingStopped est alors appelé, mais n'invoquera que la fonction enveloppée dans le _.anti-rebond après 5000 ms, qui est donné comme le deuxième argument à _.anti-rebond. Cependant, si vous appelez à nouveau tapingstopped, il réinitialisera le compte à rebours à 5000 ms à partir de l'endroit où il était. Puisque typingStopped est appelé sur chaque entrée, il n'exécutera jamais typing = false qu'après 5 secondes entre les touches.