码迷,mamicode.com
首页 > 其他好文 > 详细

[react ] TextArea 光标定位到最后

时间:2020-05-18 14:46:32      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:timeout   ima   lan   index   方法   start   src   out   hand   

记录:

使用React.createRef()方法(React 16.3+)

,创建一个ref, 使用一个变量存储。然后把ref挂载在dom节点上,通过current拿到该实例 -- dom节点信息,然后就可以使用原生dom的api方法

1.constructor下 将ref赋值给一个变量

 this.diagInput = React.createRef();

 使用场景 antd table组件中的行编辑:

把这个ref绑定在需作用的dom节点上 (Columns下)

{
                    align: "center",
                    title: ‘模板内容‘,
                    dataIndex: ‘templet‘,
                    key: ‘templet‘,
                    editable: true,
                    render: (text, record, index) => {
                        if (record.editable) {
                            return (
                                <TextArea ref={this.diagInput} id={record.key}  value={text} onChange={(e) => this.handleFieldChange(e, ‘templet‘, record.key)} />
                            )
                        } if (!record.editable) {
                            return (
                                <TextArea readOnly id={record.key} style={{ resize: "none", border: "0" }} value={text} />
                            )
                        }
                        return text;
                    },
                },
    {
                    title: ‘操作‘,
                    dataIndex: ‘operation‘,
                    key: ‘action‘,
                    align: "center",
                    key: ‘operation‘,
                    width: 80,
                    render: (text, record, index) => {
                        if (record.isAdd) {
                            return (
                                <span style={{ textAlign: "center" }}>
                                    <a style={{ color: "red" }} onClick={(e) => this.cut(e, record.key)}>删除</a>
                                </span>
                            )
                        }
                        if (!record.editable) {
                            return (
                                <span style={{ textAlign: "center" }}>
                                    <a onClick={(e) => this.toggleEditable(e, record.ID, record)}>编辑</a>
                                </span>
                            )
                        } else {
                            return (
                                <span style={{ textAlign: "center" }}>
                                    <a onClick={(e) => this.cancel(e, record.key)}>取消</a>
                                </span>
                            )
                        }
                    }
                }

d点击编辑时 设置光标进入 fouce  

 this.diagInput.current.focus();

 发现光标虽然进入 但是并没有到文本最后 ,一直在开头

技术图片

 

 

 设置延时无果 增长延时无果  将TextArea标签换成Input 奏效 ---实际场景需用到文本 input不妥   一山不通 另山通

   setTimeout(() => {
                this.diagInput.current.focus();
            }, 300)

h换一种方法 直接获取到当前dom节点 通过光标事件  将光标定位到内容最后

getFocusDom 方法---接收参数 (参数需要拿到当前编辑的那行dom 根据需求 定义是否要传) 我这是通过 document.getElementById(record.key)获取当前dom
 Selection对象表示用户选择的文本范围或插入符号的当前位置。要获取用于检查或修改的Selection对象,请使用window.getSelection()
 selectionSatrt记录鼠标点击的开始位置,selectionEnd记录结束位置
setSelectionRange 更新光标位置
//光标定位到文本最后 
        getFocusDom = (e, record) => {
            var fDOM = document.getElementById(record.key);
            var len = record.templet.length;
            this.setSelectionRange(fDOM, len, len);
        }
        setSelectionRange = (input, selectionStart, selectionEnd) => {
            if (input.setSelectionRange) {
                input.focus();
                input.setSelectionRange(selectionStart, selectionEnd);
            }
            else if (input.createTextRange) {
                var range = input.createTextRange();
                range.collapse(true);
                range.moveEnd(‘character‘, selectionEnd);
                range.moveStart(‘character‘, selectionStart);
                range.select();
            }
        }

  技术图片

o了_ !

打爆竹~~

技术图片

[react ] TextArea 光标定位到最后

标签:timeout   ima   lan   index   方法   start   src   out   hand   

原文地址:https://www.cnblogs.com/522040-m/p/12909720.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!