Prevent default scroll to element for input

Question

Can I prevent default scroll top to input when it's focused and not visible? Simple example:

<input type="search">
<div style="height: 2000px"></div>

To see what I mean, go to http://jsfiddle.net/PV5tC/ and:

Click on input to make it focused.
Scroll down to the end of the page (input is not visible now).
Start typing anything.

Why would you want to prevent the behaviour? Are people supposed to guess what they're typing in? Not everyone is a 400wpm touch-typist. — Rory McCrossan, Jul 22 '14 at 15:06
It's not exactly what you're asking but you could capture input on the `document` level then alter the value of your input element using those keystrokes. Not sure why you'd want to but it should work. — Mike Cluck, Jul 22 '14 at 15:08
I have more complex logic on my site. First I simply want to prevent it, do some actions and programmatically call focus on input. — sergdenisov, Jul 22 '14 at 15:14
I would say this is not possible, because you are trying to break something all browsers, and maybe OS' do by default, aka bad UX idea — Ryan B, Jul 22 '14 at 15:16
Thanks to all, I've decided to keep things simple and use blur. — sergdenisov, Jul 22 '14 at 16:03

score 2 · Answer 1 · edited May 23 '17 at 10:25

position : fixed; will avoid the automatic scroll to input as it won't be in the scrollable area.

Here is a fast written example, based on this answer, and using jQuery, sorry…

CSS

.hiddenInput{position: fixed; opacity: 0;}

jQuery

    var inputTop, inputBottom;
    window.onload = function()
    {
        inputTop = $('#input').offset().top
        inputBottom = inputTop + $('#input').height();
    }

    function isScrolledIntoView(el)
    {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        return ((inputBottom <= docViewBottom) && (inputTop >= docViewTop));
    }
    function hideInput()
    {
        var el = $('#input');
        if ( isScrolledIntoView(el) ){
            el.removeClass();
            }else{
            el.addClass('hiddenInput');
            el.css({top: inputTop});
        }
    }
    window.onscroll = hideInput;

working fiddle

Thank you very much! I tried so many things and encountered so many problems with my invisible input, but this did the trick for stopping the page scroll when I change the input. — Takkie253, Jun 28 '23 at 08:50

score 0 · Answer 2 · edited Jul 22 '14 at 17:01

I also cannot think of this as good design. But we all have to do something our way. Try below script if it helps

$('input[type="search"]').on("keypress", function(event){
    event.preventDefault();
    return false;
});

This will allow to keep focus on input box and browser will also not scroll to input box. If you want it cross browser you might need to handle keydown event as well. Let me know if you face any issue in handling other events.

But it will prevent you from typing any value in the input at any moment in any input : then blur is easier

score 0 · Answer 3 · answered May 09 '18 at 12:23

This is maybe antipattern but this should work. Info here: Disable scrolling when changing focus form elements ipad web app

$('input[type="search"]').on("keydown", function(){
  var oldScroll = $(window).scrollTop();
  $(window).one('scroll', function() {
    $(window).scrollTop(oldScroll);
  });
  // Your ACTION HERE
})

Prevent default scroll to element for input

3 Answers3