获得焦点，并将光标置于最后和scrollIntoView API

Posted 2021-12-18 kewenxin

jq

$(‘#coreWordName‘)[0].setSelectionRange($(‘#coreWordName‘).val().length,$(‘#coreWordName‘).val().length)
$(‘#coreWordName‘).focus();
// 如果需要获得焦点的元素是操作之后才生成的，需要延迟一下执行

react

<Input className=styles.input autoFocus ref=input => this.firstRef = input value=this.props.selectName onChange=e => this.props.onSelectNameChange(e.target.value) />

// 需要获取焦点时触发以下代码
this.firstRef.refs.input.setSelectionRange(this.firstRef.refs.input.value.length,this.firstRef.refs.input.value.length)
// this.firstRef.focus();
// 如果需要获得焦点的元素是操作之后才生成的，需要延迟一下执行

 

scrollIntoView是一个与页面（容器）滚动相关的API

调用方法为 element.scrollIntoView() 参数默认为true。

参数为true时调用该函数，页面（或容器）发生滚动，使element的顶部与视图（容器）顶部对齐；

参数为false时，使element的底部与视图（容器）底部对齐。

TIPS：页面（容器）可滚动时才有用！

 

scrollIntoView()可以在所有的html元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部不一定齐平.