2017-04-21 3 views
2

「ユーザーが入力しています」という機能は、ユーザーが入力を押したときに「入力しています」機能を削除しません。したがって、ユーザーがメッセージを送信しても、タイマーがなくなるまで、「タイピング中です」というメッセージが表示されます。ユーザーがメッセージを送信したときに「入力しています」機能を停止する方法

アイデア?

クライアント側

// Detect typing 

     function timeoutFunction() { 
     typing = false; 
     socket.emit("typing", false); 
     socket.emit("notTyping", true) 
     } 

     $("#msg").keypress(function(e){ 
     if (e.which !== 13) { 
      if (typing === false && $("#msg").is(":focus")) { 
      typing = true; 
      socket.emit("typing", true); 
      } else { 
       clearTimeout(timeout); 
       timeout = setTimeout(timeoutFunction, 1500); 
      } 
     } 
     else if(e.which == 13 && $("#msg").val() !== "") { 
      $("#"+data.person+"").remove(); 
     } 
     }); 

     socket.on("isTyping", function(data) { 
     if (data.isTyping) { 
      if ($("#"+data.person+"").length === 0) { 
      socket.emit("checkTypingFunction"); 
      $("#chat").append("<div id='"+ data.person +"'><span class='grey'>" + data.person + " is typing...</div>"); 
      timeout = setTimeout(timeoutFunction, 1500); 
      } 
     } else { 
      $("#"+data.person+"").remove(); 
      } 
     }); 

サーバー側:

client.on("typing", function(data) { 
    if (typeof people[client.id] !== "undefined") 
    socket.sockets.in(client.room).emit("isTyping", {isTyping: data, person: people[client.id].name}); 
    client.broadcast.to(client.room).emit("isTyping", {isTyping: data, person: people[client.id].name}); 
console.log("Someone is typing"); 
}); 
+0

は私が呼び出し、その多くの時間のために( 'keyup')、すでに動作している'「notTyping」 ' – Rayon

+0

を定義した期間を続けるだろう。ユーザーがEnterキーを押したときに停止する機能が必要です(メッセージを送信します)。 – JonasSH

+0

を試すhttps://jsfiddle.net/rayon_1990/8ps2wcur/1/ – Rayon

答えて

3

あなたは単純に不足しているユーザーがEnterキーを打つ場合

は、これは私のコードです。 ifステートメントに追加する必要があります。ユーザーが入力されていない場合

$("#msg").keypress(function (e) { 
    if (e.which !== 13) { 
     typing = true; // we know the user is typing because they have pressed a key but not 'Enter' 
     socket.emit("typing", true); 
     clearTimeout(timeout); 
     timeout = setTimeout(timeoutFunction, 1500); 
    } else { 
     clearTimeout(timeout); // no need to fire the timeoutFunction twice (as we do it on the next line) 
     timeoutFunction(); // probably needs a better name but this will immediately send the necessary `socket.emit('typing', false)` when the enter key is pressed 
    } 
}); 
+0

で更新しました。 'clearTimeout(timeout);が両方の条件に存在します、なぜそれを繰り返すのですか? – Rayon

+0

@Rayon私は少しうまく説明するのに役立つコメントをいくつか追加しました。 'if(timeout){clearTimeout(timeout)}'のようなもので 'if'文の外部に完全に持ち込むこともできます。これは 'if'ブロックの上に来る可能性があり、同じように動作します。 –

+0

私の質問で更新されたコードをチェックしてください。 Enterのコードが機能しない – JonasSH

関連する問題