Chức năng "Người dùng đang nhập" trong cuộc trò chuyện

Tôi đang cố gắng thêm vào trò chuyện một chức năng "người dùng đang nhập"; trò chuyện được viết bằng PHP + MySQL/Ajax.Chức năng "Người dùng đang nhập" trong cuộc trò chuyện

Làm thế nào nó cũng làm việc:

-khi đối tác trò chuyện của tôi bắt đầu gõ X tôi thấy trong hộp trò chuyện của tôi: "X là đánh máy"

-khi I (tên Y) đang gõ ông thấy trong mình hộp trò chuyện: "Y đang nhập" (giống như Yahoo Messenger).

Code tôi đã cố gắng cho đến nay:

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

Câu hỏi:

Nếu tôi dừng lại một vài giây để suy nghĩ về chính tả của tôi có vẻ như tôi đã ngừng gõ. Có cách nào liên quan và ít phức tạp hơn để đặt chức năng này? Có thể có mã cho:
- hộp văn bản không trống (người dùng nhấn bất kỳ phím nào để bắt đầu nhập) -> Tin nhắn: Người dùng đang nhập.
- hộp văn bản trống -> Tin nhắn: Người dùng không nhập.
- hộp văn bản không trống, nhưng người dùng chưa nhấn bất kỳ phím nào lâu hơn 5 giây -> Tin nhắn: Người dùng không nhập.
Nó thể hiện bản thân mình rằng tôi đang nhập; làm thế nào tôi có thể thực hiện nó hoặc ở đâu, để nhìn thấy trong hộp trò chuyện của tôi là "X người dùng đang gõ" và không phải "Bản thân tôi đang gõ". Tương tự cho người dùng khác, anh ta sẽ nhận được một thông báo về tôi gõ/không gõ, không phải về bản thân mình.

Cảm ơn bạn.

Nguồn

2012-01-22 Ingrid

+1 cho bạn ..Bạn đã có giải pháp? Bởi vì tôi cũng cần điều tương tự chính xác những gì bạn cần? –

Trường hợp người nào đó đặt mã ajax để gửi dữ liệu –

Bạn có thể sử dụng JQuery để xử lý sự kiện nhấn phím thay vì HTML. Bạn có thể thử một cái gì đó như thế này. Sau đó đặt #typing mặc định của bạn trên div khi Người dùng không nhập.

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

Nguồn

2012-05-09 04:57:41 MikeyObviously

Làm thế nào để chúng ta chuyển điều này sang cuộc trò chuyện khác? Tôi giả định điều này sẽ cho thấy hoạt động của tôi gõ. – Darktwen

Tôi đã tạo một fiddle có thể hữu ích cho bạn. Ý tưởng là làm mới thông điệp hoạt động bằng cách sử dụng hàm 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);

Nguồn

2013-04-24 14:07:46

Trường hợp người nào đó đặt mã ajax để gửi dữ liệu –

Điều này là hoàn hảo ... nhưng tôi muốn hỏi xem bạn có biết cơ sở dữ liệu sẽ lặp như thế nào .. Làm cách nào để người dùng nhập vào người dùng khác nếu đang nhập. ?? –

@jamesOduro có thể gửi dữ liệu nhập thông qua ổ cắm sẽ là một ý tưởng tốt hơn là chèn vào cơ sở dữ liệu. – 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>

Nguồn

2017-02-25 14:24:20

Javascript đơn giản + HTML là đủ để có được tính năng này. –

Tôi thấy rằng trong trình duyệt onkeypress của tôi không bao gồm backspace, xóa, các phím mũi tên hoặc thay đổi, (nhưng đó có thể không phải là một vấn đề.) –

Theres một plugin thư viện tiện lợi gọi underscore.js

Trong số nhiều chức năng hữu ích của nó là một trong gọi _.debounce, có thể được sử dụng như vậy để theo dõi gõ:

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

Cách điều này hoạt động là trên đầu vào của khu vực văn bản typingStarted được gọi và đặt đánh máy đúng để ngăn không cho nó được gọi lại. typeStopped sau đó được gọi, nhưng sẽ chỉ gọi hàm được bọc trong _.debounce sau 5000 mili giây được đưa ra làm đối số thứ hai cho _.debounce. Tuy nhiên nếu bạn gọi gõStopped một lần nữa, nó sẽ thiết lập lại đếm ngược trở lại 5000 ms từ nơi nó đã từng ở đó. Vì typingStopped được gọi trên mỗi đầu vào, nó sẽ chỉ thực thi gõ = false sau 5 giây đầy đủ giữa các lần nhấn phím.

Nguồn

2018-01-04 22:45:22

Chức năng "Người dùng đang nhập" trong cuộc trò chuyện

Trả lời

Các vấn đề liên quan