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

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作为参数,调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部不一定齐平.

原文地址:https://www.cnblogs.com/kewenxin/p/10966608.html