Funkcja "Użytkownik pisze" na czacie

Próbuję dodać na czacie funkcję "użytkownik pisze"; czat napisany w PHP + MySQL/Ajax.Funkcja "Użytkownik pisze" na czacie

Jak to powinno działać:

-Po mój czat partnerem X zacznie wpisywać widzę w moim oknie czatu: „X jest wpisanie”

-Kiedy ja (o nazwie Y) piszę widzi w jego chat box: "Y pisze" (podobnie jak Yahoo Messenger).

Kod próbowałem dotąd:

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

Pytania:

Gdybym zatrzymać się na kilka sekund, aby myśleć o mojej pisowni wygląda jakbym przestał pisać. Czy istnieje bardziej odpowiedni i mniej skomplikowany sposób ustawienia tej funkcji? Czy jest możliwy kod dla:
- pole tekstowe nie jest puste (użytkownik nacisnął dowolny klawisz, aby rozpocząć pisanie) -> Wiadomość: Użytkownik pisze.
- pole tekstowe puste -> Wiadomość: użytkownik nie pisze.
- Pole tekstowe nie jest puste, ale użytkownik nie naciśnie żadnego klawisza dłużej niż 5 sekund -> Wiadomość: Użytkownik nie pisze.
Pokazuje, że piszę; jak mogę go zaimplementować lub gdzie, aby zobaczyć w moim okienku na czacie "X użytkownik pisze", a nie "Ja sam piszę". To samo dla drugiego użytkownika, powinien dostać wiadomość o pisaniu/pisaniu, a nie o sobie.

Dziękuję.

Źródło

2012-01-22 Ingrid

+1 dla Ciebie ..Czy masz rozwiązanie? Ponieważ potrzebuję dokładnie tego samego, czego potrzebujesz? –

Gdzie ktoś umieści kod ajaxowy w celu wysłania danych? –

Możesz używać JQuery do obsługi zdarzenia keypress zamiast HTML. Możesz spróbować czegoś takiego. Następnie ustaw domyślne #typing na div, ponieważ użytkownik nie pisze.

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

Źródło

2012-05-09 04:57:41 MikeyObviously

Jak przekazujemy to innej rozmowie? Zakładam, że to pokaże aktywność pisania na klawiaturze. – Darktwen

Stworzyłem fiddle, które mogą być pomocne dla Ciebie. Chodzi o to, aby odświeżyć wiadomość o aktywności za pomocą funkcji 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);

Źródło

2013-04-24 14:07:46

Gdzie ktoś wstawił kod ajax do wysyłania danych –

To jest idealne ... ale chcę zapytać, czy wiesz, jak baza danych będzie się zapętlać ... Jak mogę uzyskać, że użytkownik pisze do innego użytkownika, jeśli piszę. ?? –

@jamesOduro prawdopodobnie wysyłanie danych do pisania przez gniazdo będzie lepszym pomysłem niż wstawianie do bazy danych. – marukobotto

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

Źródło

2017-02-25 14:24:20

Proste JavaScript + HTML jest wystarczające, aby uzyskać tę funkcję. –

Znalazłem, że w mojej przeglądarce onkeypress nie zawiera backspace, delete, klawiszy strzałek ani shift (ale to chyba nie jest problem). –

Theres ładne wtyczki biblioteki o nazwie underscore.js

Wśród wielu użytecznych funkcji jest jeden o nazwie _.debounce, które mogą być używane jak więc śledzić wpisując:

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

Sposób działa to tak, że na wejściu do pola tekstowego jest wywoływany typingStarted, który ustawia pisanie na wartość true, co uniemożliwia ponowne wywołanie. TypingStopped jest następnie wywoływany, ale wywoła tylko funkcję owiniętą w _.debounce po 5000 ms, która jest podana jako drugi argument _.debounce. Jeśli jednak zadzwonisz ponownie, zostanie ponownie ustawione odliczanie z powrotem do 5000 ms od miejsca, w którym się znajdowało. Ponieważ na każdym wejściu wywoływana jest metoda typingStopped, będzie ona wykonywać tylko typing = false po pełnych 5 sekundach między naciśnięciami klawiszy.

Źródło

2018-01-04 22:45:22

Funkcja "Użytkownik pisze" na czacie

Odpowiedz

Powiązane problemy