Función "El usuario está escribiendo" en el chat

Question

Estoy tratando de agregar al chat una función de "usuario está escribiendo"; chat escrito en PHP + MySQL/Ajax.

cómo debería funcionar:

-cuando mi compañero de chat X comienza a escribir que veo en mi ventana de chat: "X está escribiendo"

-cuando I (denominado Y) estoy escribiendo que ve en su cuadro de chat: "Y está escribiendo" (al igual que Yahoo Messenger).

El código que he probado hasta ahora:

<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> 

Preguntas:

1. Si paro durante unos segundos para pensar en mi ortografía parece que me he dejado de escribir. ¿Hay una manera más relevante y menos complicada de establecer esta función? ¿Existe un código para:

   • cuadro de texto no vacío (el usuario presionó una tecla para que comience a escribir) -> Mensaje: El usuario está escribiendo.
   • cuadro de texto vacío -> Mensaje: El usuario no está escribiendo.
   • cuadro de texto no está vacío, pero el usuario no ha presionado ninguna tecla durante más de 5 segundos -> Mensaje: El usuario no está escribiendo.

2. Me muestra que estoy escribiendo; cómo podría implementarlo o dónde, para ver en mi cuadro de chat el "usuario de X está escribiendo" y no "yo estoy escribiendo". Lo mismo para el otro usuario, debería recibir un mensaje sobre mí escribiendo/no escribiendo, no sobre él mismo.

Gracias.

Answer 1

Puede usar JQuery para manejar el evento de pulsación de tecla en lugar de HTML. Puede intentar algo como esto. Luego configure su #typing por defecto en div ya que el Usuario no está escribiendo.

//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"); 
    } 
}); 

Answer 2

que han creado una fiddle que podría ser útil para usted. La idea es actualizar el mensaje de actividad utilizando la función 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); 

Answer 3

 <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>
 
   
 
  
 
 

 

Answer 4

Hay un plugin de biblioteca ingenioso llamado underscore.js

Entre sus muchas funciones útiles es uno llamado _.debounce, que puede ser utilizado como tal para realizar un seguimiento escribiendo:

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 forma esto funciona porque a la entrada del área de texto se llama a typingStarted y establece el tipeo en verdadero impidiendo que se vuelva a llamar. typingStopped se llama, pero solo invocará la función ajustada en _.debounce después de 5000 ms que se proporciona como el segundo argumento para _.debounce. Sin embargo, si llama a typingStopped nuevamente, restablecerá la cuenta regresiva a 5000 ms desde donde estaba. Como typingStopped es invocado en cada entrada, solo ejecutará typing = false luego de 5 segundos completos entre cada pulsación de tecla.