Calling a function based on input field value changes in JavaScript

Question

Somehow my same closed ,because the question was not clear to everyone. I a repeating the same question. Here i have this input field when the user is typing I am calling handleMessagePress(e) function continuously ,and when the user stops typing I, am calling stop() function after five seconds . But my question is when the user starts typing , i need to call handleMessagePress(e) function only once and wait for 5 seconds and if the user is still typing the same function should be called automatically otherwise the stop function should be called automatically. In simpler words after 5seconds my Program should be able to check user is typing or not whether the user is typing or not if typing call handleMessagePress(e) otherwise call stop function automatically

 <input placeholder="type your message" id="messageInputField"  onKeyPress={(e) => handleMessagePress(e)}/>



  let myInput = document.getElementById("messageInputField");
  let timer;
  if (myInput) {
    myInput.addEventListener("keyup", () => {
      clearTimeout(timer);
      timer = setTimeout(stop, 5000);
    });
  }
 
const stop=()=>{
console.log("user stop typing");
}

 const handleMessagePress = (e) => {
    console.log("user is typing");
    }

So in plain english: Once a user starts typing, every 5 seconds, you want to check if the user is still typing or has stopped typing? — Husman
– Husman, Commented Sep 22, 2021 at 13:28

Alaksandar Jesus Gene · Accepted Answer · 2021-09-22 13:37:38Z

2

 let myInput = document.getElementById("messageInputField");
  let timer;
  let executeHandlePress = true; // flag to watch handle press function execution
  if (myInput) {
    myInput.addEventListener("keyup", () => {
      clearTimeout(timer);
      timer = setTimeout(stop, 5000);
    });
  }
 
const stop=()=>{
console.log("user stop typing");
}

 const handleMessagePress = (e) => {
    if(!executeHandlePress){ // if flag false, return
    return;
    }
     console.log("user is typing"); // if true execute
   
   executeHandlePress = false; // toggle flag to false
   
   setTimeout(()=>{
   executeHandlePress = true; // reset after 5 seconds
   }, 5000);
    }

<input placeholder="type your message" id="messageInputField"  onKeyPress=" handleMessagePress(event)" />

answered Sep 22, 2021 at 13:37

Alaksandar Jesus Gene

6,89113 gold badges61 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Puneet biswas Over a year ago

Alaksandar Jesus Gene: It's not calling stop function

Alaksandar Jesus Gene Over a year ago

prnt.sc/1t8jtrd

Puneet biswas Over a year ago

Can you please paste sandbox link here

Alaksandar Jesus Gene Over a year ago

click on Run Code Snippet prnt.sc/1t8kyi0

Collectives™ on Stack Overflow

Calling a function based on input field value changes in JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related