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

  • 相关阅读:
    视频测试序列的下载地址【转】
    RDO、SAD、SATD、λ相关概念【转】
    RGB、YUV和YCbCr介绍【转】
    H.264和HEVC分析软件和工具【转】
    Mysql——Innodb和Myisam概念与数据恢复
    ubuntu个人初始配置记录
    H.264学习笔记6——指数哥伦布编码
    H.264学习笔记5——熵编码之CAVLC
    C/C++语言学习——内存分配管理
    H.264学习笔记4——变换量化
  • 原文地址:https://www.cnblogs.com/kewenxin/p/10966608.html
Copyright © 2011-2022 走看看