输入元素获得输入焦点
document.getElemeentById('myinput').focus();
通过观察发现,元素如果是在屏幕可视范围之外,使用以上的代码获得焦点后,当前页面的滚动条会立即滚动到目标元素的位置,这在表单输入及控制时,能带来一定的便利性。
但在开发自定义功能组件时,会自动滚动到目标位置的特性却会为开发者带来困扰,例如一个组件以弹出层的形式展现,弹出层中带有一个输入元素,插件希望在展示完成弹出层后,使得输入元素获得焦点;这时,如果插件的弹出层显示位置在屏幕可视区域之外,页面会自动滚动到页面顶部,造成操作开发上的困难
实际上 focus 方法是可以带有设置参数的(ie9+兼容)
element.focus(focusOption); // Object 类型的参数
设置参数内容 preventScroll Boolean
false (默认) - 会将屏幕滚动到元素的位置
true - 保持当前屏幕位置不动
document.getElemeentById('myinput').focus({preventScroll:true});
使用以上方式后,元素获得了输入焦点,但不会使得屏幕位置发生变化