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
– Rory McCrossan, Commented Jul 22, 2014 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
– Mike Cluck, Commented Jul 22, 2014 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
– sergdenisov, Commented Jul 22, 2014 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
– Ryan B, Commented Jul 22, 2014 at 15:16
Thanks to all, I've decided to keep things simple and use blur. — sergdenisov
– sergdenisov, Commented Jul 22, 2014 at 16:03

Community · Accepted Answer · 2017-05-23 10:25:04Z

2

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

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Jul 22, 2014 at 15:42

Kaiido

140k15 gold badges266 silver badges333 bronze badges

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

2 Comments

sergdenisov Over a year ago

I know it, but it's not I need.

Takkie253 Over a year ago

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.

user3415926 · Accepted Answer · 2018-05-09 12:23:15Z

1

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
})

answered May 9, 2018 at 12:23

user3415926

463 bronze badges

Comments

Kaiido · Accepted Answer · 2014-07-22 17:01:39Z

0

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

edited Jul 22, 2014 at 17:01

Kaiido

140k15 gold badges266 silver badges333 bronze badges

answered Jul 22, 2014 at 16:12

khagesh

9581 gold badge6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Prevent default scroll to element for input

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related