How to make this script active after 1 second?

Question

Edit: Not a timeout, it should be like active after 2 seconds. Else it disturbs the scroll on focus script.

I have this script here, but would like to have a timeout for 1 or 2 seconds.

document.addEventListener("scroll", function() {
  document.activeElement.blur();
});

There should not be an instant blur, else my 'scroll on focus input' will not work. Can anyone help? Thanks already.

$("#myInput").click(function () {
$("html, body").animate({ scrollTop: $("#osb").offset().top }, 300);
return true;

});

      <div id="osb">
 <div id="osb01">
<input type="text" id="myInput" placeholder="Search.." title="Search">
</div>
</div>

Possible duplicate of [Sleep in JavaScript - delay between actions](https://stackoverflow.com/questions/758688/sleep-in-javascript-delay-between-actions) — The Fool, Jan 23 '18 at 10:00

gurvinder372 · Accepted Answer · 2018-01-23T10:00:09.587

4

Use setTimeout

document.addEventListener("scroll", function() {
    setTimeout( function(){ document.activeElement.blur() }, 1000 ); //1000 milliseconds
});

Edit

Since you don't want to defocus the search bar, then check if the current active element is not search bar

document.addEventListener("scroll", function() {
    if ( document.activeElement.id == "myInput" ) //assuming that search bar id is myInput
    {
        setTimeout( function(){ document.activeElement.blur() }, 1000 ); //1000 milliseconds
    }
});

myInput

edited Jan 23 '18 at 10:00

answered Jan 23 '18 at 09:14

gurvinder372

66,980
10
72
94

I just noticed, I did not explained it well enough. I meant, the script should be starting to work after 1 or 2 seconds. Because now its removing focus after 1 second, which is bad I see. Thank you already but could you help me with this, too? – Albeld Jan 23 '18 at 09:34
@Albeld Which script should start working after 1 or 2 seconds? You mean that unless user the scroll stays for 1 or 2 seconds, blur shouldn't happen? – gurvinder372 Jan 23 '18 at 09:36
I mean right now if I focus the search bar, it scrolls down untill you only see the search bar on top. With this script it focuses out again due the scrolling. So if the script would work after a few seconds, it could scroll down to the search bar and stay focused. – Albeld Jan 23 '18 at 09:42
I add the script I have for scrolling on focus – Albeld Jan 23 '18 at 09:43
@Albeld ohh, there was fair amount of info missing from your original question... I think you should exclude search bar from the check. If `document.activeElement` is not search bar, only then blur should be triggered. – gurvinder372 Jan 23 '18 at 09:49
sorry I'm new here and need to get into it. – Albeld Jan 23 '18 at 09:54
it is still losing focus after scroll (scroll on focus script) – Albeld Jan 23 '18 at 10:07
@Albeld Check if you were using the correct id for search bar – gurvinder372 Jan 23 '18 at 10:07

score 0 · Answer 2 · answered Jan 23 '18 at 09:43

gurvinder32 right, but there is better way to do this.

document.onscroll = function() {
  var active = document.activeElement;
  setTimeout(function() {
    active.blur();
  }, 1000);
}

body {
  height: 1000px;
  font-size: 24px;
  background: black;
  padding: 8px;
  margin: 0;
}

input {
  width: 100%;
  outline: 5px solid green;
}

<input value="test1">
<input value="test2">
<input value="test3">
<input value="test4">
<input value="test5">
<input value="test6">
<input value="test7">
<input value="test8">
<input value="test9">
<input value="test10">

This method remembers active element before timeout, so if user change focus before timeout, then old element blurs, so nothing changes.

thanks but its losing focus after it scrolls down. now its like this: focus input > scrolls down > focus lost. i need to keep focused but on scrolling again it should focus out. — Albeld, Jan 23 '18 at 09:51

How to make this script active after 1 second?

2 Answers2

myInput