채팅에서 "사용자가 입력 중" 기능
저는 채팅에 "사용자가 타이핑하고 있다" 기능을 추가하려고 합니다. 즉, PHP + MySQL/Ajax로 작성된 채팅입니다.
작동 방식:
-제 채팅 파트너 X가 입력을 시작하면 채팅 상자에 "X는 입력 중입니다."라는 메시지가 나타납니다.
-내가 (Y라는 이름을 가진) 입력할 때 그는 그의 채팅 상자에서 "Y는 입력 중입니다"(Yahoo Messenger와 마찬가지로)를 봅니다.
내가 지금까지 시도한 코드:
<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>
질문:
내 철자에 대해 생각하기 위해 몇 초 동안 멈추면 타이핑이 중단된 것처럼 보입니다.이 기능을 설정하는 데 더 적절하고 덜 복잡한 방법이 있습니까?가능한 코드는 다음과 같습니다.
- 텍스트 상자가 비어 있지 않음(사용자가 아무 키나 눌러 입력하기 시작함) -> 메시지:사용자가 입력 중입니다.
- 빈 텍스트 상자 -> 메시지:사용자가 입력하지 않습니다.
- 텍스트 상자가 비어 있지 않지만 사용자가 5초 이상 아무 키도 누르지 않았습니다. -> 메시지:사용자가 입력하지 않습니다.
이것은 제가 타자를 치고 있다는 것을 스스로에게 보여줍니다. 제가 어떻게 그것을 구현할 수 있는지 또는 어디에서 제 채팅 상자에서 "X 사용자가 타자 중입니다"가 아니라 "X 사용자가 타자 중입니다"를 볼 수 있는지를 보여줍니다.다른 사용자도 마찬가지로 자신에 대한 메시지가 아니라 제가 타이핑을 하고/안하고 있다는 메시지를 받아야 합니다.
감사해요.
당신에게 도움이 될 수 있는 바이올린을 만들었습니다.자바스크립트를 사용하여 활동 메시지를 새로 고치는 것입니다.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);
<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>
언더스코어.js라는 강력한 라이브러리 플러그인이 있습니다.
많은 유용한 함수 중에는 _.debounce라는 함수가 있는데, 이 함수는 타이핑을 추적하는 데 이렇게 사용할 수 있습니다.
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
};
텍스트 영역 입력 시 Started를 호출하고 typing을 true로 설정하여 다시 호출할 수 없도록 합니다.그러면 stopped를 입력하면 호출되지만 _.debounce의 두 번째 인수로 지정된 5000ms 이후에 _.debounce에 랩된 함수만 호출됩니다.그러나 typing stopped를 다시 호출하면 카운트다운이 원래 있던 위치에서 다시 5000ms로 재설정됩니다.typingStopped는 각 입력에 대해 호출되므로 키를 누르는 사이에 5초가 지나면 typing= false만 실행됩니다.
var isTyping = false;
var isNotTyping;
document.getElementById('chat-message-input').onkeypress = () => {
sendIsTypingToUser()
if (isNotTyping != undefined) clearTimeout(isNotTyping);
isNotTyping = setTimeout(sendIsNotTyping, 900);
};
function sendIsTypingToUser(){
if(!isTyping){
console.log("IsTyping...........")
isTyping = true
}
}
function sendIsNotTyping(){
console.log("Not Typing...........")
isTyping = false
}<input id="chat-message-input" type="text" placeholder="Enter Message..." autofocus style="width: 50%; padding: 8px;">HTML 대신 JQuery를 사용하여 키프레스 이벤트를 처리할 수 있습니다. 이런 방법을 시도해 볼 수 있습니다.그런 다음 기본 #typing on div를 User is not typing으로 설정합니다.
//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");
}
});
언급URL : https://stackoverflow.com/questions/8963810/user-is-typing-function-in-chat
'programing' 카테고리의 다른 글
| '주문 기준'이 지정되지 않은 경우 쿼리가 레코드 집합에 대해 선택하는 순서는 무엇입니까? (0) | 2023.08.17 |
|---|---|
| CSS에서 "!important"를 사용하면 어떤 의미가 있습니까? (0) | 2023.08.17 |
| 파일에서 실행 중인 응용 프로그램에 대한 CORS 오류:// 구성표 (0) | 2023.08.17 |
| 마스터 분기를 업스트림으로 되돌리는 방법 (0) | 2023.08.17 |
| HTML/CSS의 전체 div에 대한 href 링크 (0) | 2023.08.17 |