focus() para ingresar sin desplazarse

Question

Tengo un texto de entrada de búsqueda que me gustaría aplicar focus() al cargar la página, el problema es que la función focus hace automáticamente un desplazamiento a este campo. Cualquier solución para desactivar este desplazamiento?

<input id="search_terms" type="text" /> 
<script> 
    document.getelementbyId('search-terms').focus(); 
</script> 

Answer 1

Aquí es una solución completa:

var cursorFocus = function(elem) { 
    var x = window.scrollX, y = window.scrollY; 
    elem.focus(); 
    window.scrollTo(x, y); 
} 

cursorFocus(document.getElementById('search-terms')); 

Answer 2

Si está utilizando jQuery, también se puede hacer esto:

$.fn.focusWithoutScrolling = function(){ 
    var x = window.scrollX, y = window.scrollY; 
    this.focus(); 
    window.scrollTo(x, y); 
}; 

y luego

$('#search_terms').focusWithoutScrolling(); 

Answer 3

Un poco modificado versión que admite más navegadores (incluido IE9)

var cursorFocus = function(elem) { 
    var x, y; 
    // More sources for scroll x, y offset. 
    if (typeof(window.pageXOffset) !== 'undefined') { 
     x = window.pageXOffset; 
     y = window.pageYOffset; 
    } else if (typeof(window.scrollX) !== 'undefined') { 
     x = window.scrollX; 
     y = window.scrollY; 
    } else if (document.documentElement && typeof(document.documentElement.scrollLeft) !== 'undefined') { 
     x = document.documentElement.scrollLeft; 
     y = document.documentElement.scrollTop; 
    } else { 
     x = document.body.scrollLeft; 
     y = document.body.scrollTop; 
    } 

    elem.focus(); 

    if (typeof x !== 'undefined') { 
     // In some cases IE9 does not seem to catch instant scrollTo request. 
     setTimeout(function() { window.scrollTo(x, y); }, 100); 
    } 
} 

Answer 4

A partir de hoy, la mejor forma de establecer el foco en un elemento a la carga de la página está utilizando el atributo autofocus. Esto no implica ningún desplazamiento.

<input id="search_terms" type="text" autofocus />

El autofocus attrubute is part of the HTML5 standard y es soportado por todos los navegadores, con la única excepción notable del Internet Explorer 9 o anterior.

Answer 5

Las respuestas aquí no se ocupan de desplazarse por toda la jerarquía, sino solo por las barras de desplazamiento principales. Esta respuesta se hará cargo de todo:

var focusWithoutScrolling = function (el) { 
     var scrollHierarchy = []; 

     var parent = el.parentNode; 
     while (parent) { 
      scrollHierarchy.push([parent, parent.scrollLeft, parent.scrollTop]); 
      parent = parent.parentNode; 
     } 

     el.focus(); 

     scrollHierarchy.forEach(function (item) { 
      var el = item[0]; 

      // Check first to avoid triggering unnecessary `scroll` events 

      if (el.scrollLeft != item[1]) 
       el.scrollLeft = item[1]; 

      if (el.scrollTop != item[2]) 
       el.scrollTop = item[2]; 
     }); 
    }; 

Answer 6

hay una nueva WHATWG standard que le permite pasar todo un objeto al focus() que especifica que desea evitar que el navegador de desplazamiento del elemento a la vista:

const element = document.getElementById('search-terms') 

element.focus({ 
    preventScroll: true 
}); 

Actualmente es compatible con Chrome 64 y Edge Insider Preview build 17046.