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

不念不忘少年蓝@ 2022-12-23 00:54 254阅读 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 条评论，254人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 Qt获取QText Edit的文本内容

不同于其它控件的text()函数，QText Edit获取文本的函数为toPlainText()。 QString strTxtEdt = ui->textEdit-

小咪咪/ 2022年05月19日 07:43/ 0 赞/ 385 阅读

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

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

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

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

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

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

相关文本内容替换

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] 1 import java.io.BufferedReade

太过爱你忘了你带给我的痛/ 2021年11月01日 09:56/ 0 赞/ 362 阅读