zoukankan      html  css  js  c++  java
  • 获得焦点,并将光标置于最后和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作为参数,调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部不一定齐平.

  • 相关阅读:
    作为一个非计算机专业的人,你们是怎样进入IT行业的?
    第一次写博客
    变卖
    近2周关于Shadowing的总结
    二十九岁步入而立之年的思考
    最美的回忆漫天的雪
    有趣的房东夫妇
    遥远的思恋—我的儿子
    五年一轮回
    写在开工之前我的2010
  • 原文地址:https://www.cnblogs.com/kewenxin/p/10966608.html
Copyright © 2011-2022 走看看