react获取文本焦点并修改文本内容

不念不忘少年蓝@ 2022-12-23 00:54 267阅读 0赞

## 1、工具类 ##

export function insertAfterText(textDomId: string, input: string) { 
        const textDom: any = document.getElementById(textDomId);
        if (
            textDom.selectionStart ||
            textDom.selectionStart === '0' ||
            textDom.selectionStart === 0
        ) { 
            const startPos = textDom.selectionStart;
            const endPos = textDom.selectionEnd;
            const {  scrollTop, value } = textDom;
            textDom.value = `${ value.substring(0, startPos)}${ input}${ value.substring( endPos, value.length )}`;
            textDom.focus();
            textDom.selectionStart = startPos + input.length;
            textDom.selectionEnd = startPos + input.length;
            textDom.scrollTop = scrollTop;
        } else { 
            textDom.value += input;
            textDom.focus();
        }
        return textDom.value;
    }

## 2、使用方式 ##

两个参数，第一个为id，第二个为在焦点后添加的内容  
![在这里插入图片描述][20201121200248946.png_pic_center]

var insteadText = insertAfterText("codeRuleExpression", selectedRowsState[0].functionName)
          form.setFieldsValue({ 
            "codeRuleExpression": insteadText
          })
          actionRef.current?.clearSelected()
          setCodeFunctionModalVisable(false)

[20201121200248946.png_pic_center]: /images/20221120/6195e8da43474c938a0352dd1e6a5d32.png

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关 ueditor获取文本内容的方法

ueditor 在js中获取文本内容的方式 editor.getAllHtml()取得完整的html代码，可以直接显示成完整的html文档 editor.getP

古城微笑少年丶/ 2023年10月03日 18:41/ 0 赞/ 22 阅读

相关 react 渲染富文本中的标签内容

![20200218175332918.png][] 假设拉取下来的是富文本携带html标签的内容应该如何渲染到页面：例：<div>我是富文本内容</div> 在标签

旧城等待，/ 2023年07月06日 11:53/ 0 赞/ 1 阅读

相关 jQuery获取input焦点并选中文本

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

淡淡的烟草味﹌/ 2023年06月19日 04:23/ 0 赞/ 16 阅读

相关 react获取文本焦点并修改文本内容

1、工具类 export function insertAfterText(textDomId: string, input: string) {

不念不忘少年蓝@/ 2022年12月23日 00:54/ 0 赞/ 267 阅读

相关 android 焦点背景,Android Selector获取焦点后文本背景修改的实现代码

1，获取焦点后文本背景进行修改【1】 selector状态选择器(bg\_check\_three(存放 res - color))资源文件下，否则不起作用【2】焦

喜欢ヅ旅行/ 2022年10月14日 01:01/ 0 赞/ 268 阅读

相关 DevExpress GridView 选中单元格文本内容当失去焦点又获得焦点时保持原来的文本选中内容

该需求来自一位群友公司的客户，耗资了两杯高端奶茶钱咨询我，在这里分享给大家。具体需求是这样的，XtraTabControl界面，一个Page有GridControl，另外一

我就是我/ 2022年09月10日 07:08/ 0 赞/ 160 阅读

相关【jQuery】根据table文本内容修改颜色

1.说明我们使用jQuery轻松选取一些元素进行修改样式，但有时候需要根据实际的内容去修改，比如说，根据一个表格内的单元格的文本内容判断修改显示的颜色，如果是异常的数据

亦凉/ 2022年09月02日 12:57/ 0 赞/ 214 阅读

相关富文本编辑器tinymce获取文本内容和设置文本内容

1、如果当前页面只有一个编辑器：获取内容：tinyMCE.activeEditor.getContent() 设置内容：tinyMCE.activeEditor.se

怼烎@/ 2022年08月19日 11:26/ 0 赞/ 541 阅读

相关富文本编辑器tinymce获取文本内容和设置文本内容

1、如果当前页面只有一个编辑器：获取内容：tinyMCE.activeEditor.getContent() 设置内容：tinyMCE.activeEditor.

向右看齐/ 2022年05月12日 07:08/ 0 赞/ 619 阅读

相关简单的file获取文本内容且, 修改文本内容(java8)

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 题主, 因入职新公司, 表设计混乱, 不得不手动写一个小

清疚/ 2022年01月14日 23:21/ 0 赞/ 571 阅读