JS在TextArea光标位置插入文字+移动光标到文字末尾

墨蓝 2022-10-01 05:55 170阅读 0赞

=IE支持document.selection  
=Firefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd属性

function insertText(obj,str) {
    
        if (document.selection) {
    
            var sel = document.selection.createRange();
    
            sel.text = str;
    
        } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
    
            var startPos = obj.selectionStart,
    
                endPos = obj.selectionEnd,
    
                cursorPos = startPos,
    
                tmpStr = obj.value;
    
            obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
    
            cursorPos += str.length;
    
            obj.selectionStart = obj.selectionEnd = cursorPos;
    
        } else {
    
            obj.value += str;
    
        }
    
    }
    
    function moveEnd(obj){
    
        obj.focus();
    
        var len = obj.value.length;
    
        if (document.selection) {
    
            var sel = obj.createTextRange();
    
            sel.moveStart('character',len);
    
            sel.collapse();
    
            sel.select();
    
        } else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
    
            obj.selectionStart = obj.selectionEnd = len;
    
        }
    
    
    }

<input type="button" οnclick="insertText(document.getElementById('text'),' 新文字—YoyiorLee ')" value="插入文字"></input>

<input type="button" οnclick="moveEnd(document.getElementById('text'))" value="移到末尾"></input>

发表评论取消回复

表情：

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

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

相关阅读

相关 js 指定光标位置

可以使用 JavaScript 中的 selectionStart 和 selectionEnd 属性来指定光标的位置。这些属性属于 HTMLInputElement 对象

柔情只为你懂/ 2024年03月26日 08:24/ 0 赞/ 82 阅读

相关 pyside6的QTextEdit 自动移动光标到末尾

在双向绑定过后，QTextEdit更新后光标自动定位首位，这样给输入带了很大麻烦，这里需求是在渲染过后，光标自动定位在末尾。渲染 self.edit.se

以你之姓@/ 2024年03月25日 17:55/ 0 赞/ 46 阅读

相关 input获取光标位置,插入emoji

在使用emoji表情的时候,需要在多个文字中间进行插入表情需要使用原生获取input框(因为使用组件会被包裹一层,使用ref无法直接获取) onSelectEm

╰+哭是因爲堅強的太久メ/ 2022年10月17日 04:18/ 0 赞/ 155 阅读

相关 JS在TextArea光标位置插入文字+移动光标到文字末尾

=IE支持document.selection =Firefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd属性

墨蓝/ 2022年10月01日 05:55/ 0 赞/ 171 阅读

相关光标所在位置插入一串字符，并在特定位置设置光标锁定位置

在写一个小型的编辑器时，有很多的鼠标点击事件，用于设定markdown语法。那么如何获取光标的所在位置，并插入一串字符，且将光标定位到特定位置？接下来就是在网上查看的方法

喜欢ヅ旅行/ 2022年07月28日 09:22/ 0 赞/ 224 阅读

相关 JS-设置input光标位置

设置input光标位置： <!DOCTYPE html> <html> <head> <meta chars

àì夳堔傛蜴生んèń/ 2022年05月13日 01:52/ 0 赞/ 360 阅读

相关 js 在div光标位置加入内容

完整代码，可以自己测试 div指定位置插入内容 <html> <head></head> <body> <img id="pic"

ゝ一世哀愁。/ 2022年04月16日 04:12/ 0 赞/ 233 阅读

相关 css 调整input内文字与光标的初始位置

作者：LoveEmperor-王子様 css 调整input内文字与光标的初始位置调整input内文字、placeholder文字位置、光标位置

短命女/ 2022年04月08日 15:56/ 0 赞/ 3159 阅读

相关 textarea在光标位置添加内容

(function($) \{ $.fn.extend( \{ insertContent : function(myValue,

左手的ㄟ右手/ 2022年03月11日 08:10/ 0 赞/ 355 阅读

相关 TextArea中定位光标位置

在项目中，遇到一个场景：希望能在TextArea中输入某条记录中的明细(明细较简单，没有附属信息，只用记录顺序和值即可，譬如用“+”号来作为明细分隔符：1+1.5+2+

朱雀/ 2021年12月15日 12:45/ 0 赞/ 344 阅读