获取textarea文本框所选字符光标位置索引，以及选中的文本值；textarea高度自适应，随着内容增加高度增加；获取输入框中的光标位置...

关注

转载最新推荐文章于 2026-08-15 10:00:06 发布 646 阅读 AI 写同款· GEO 优化 ›

获取textarea文本框所选字符光标位置索引，以及选中的文本值

 　　　　　　　　$.fn.selection = function () {
                    var s, e, range, stored_range;
                    if (this[0].selectionStart == undefined) {
                        var selection = document.selection;
                        if (this[0].tagName.toLowerCase() != "textarea") {
                            var val = this.val();
                            range = selection.createRange().duplicate();
                            range.moveEnd("character", val.length);
                            s = (range.text == "" ? val.length : val.lastIndexOf(range.text));
                            range = selection.createRange().duplicate();
                            range.moveStart("character", -val.length);
                            e = range.text.length;
                        } else {
                            range = selection.createRange(),
                                stored_range = range.duplicate();
                            stored_range.moveToElementText(this[0]);
                            stored_range.setEndPoint('EndToEnd', range);
                            s = stored_range.text.length - range.text.length;
                            e = s + range.text.length;
                        }
                    } else {
                        s = this[0].selectionStart,
                            e = this[0].selectionEnd;
                    }
                    var te = this[0].value.substring(s, e);
                    return {start: s, end: e, text: te};
                };

textarea高度自适应，随着内容增加高度增加

                $.fn.autoHeight = function(){
                    return this.each(function(){
                        var $this = jQuery(this);
                        if( !$this.attr('_initAdjustHeight') ){
                            $this.attr('_initAdjustHeight', $this.outerHeight());
                        }
                        _adjustH(this).on('input', function(){
                            _adjustH(this);
                        });
                    });
                    /**
                     * 重置高度
                     * @param {Object} elem
                     */
                    function _adjustH(elem){
                        var $obj = jQuery(elem);
                        return $obj.css({height: $obj.attr('_initAdjustHeight'), 'overflow-y': 'hidden'})
                            .height( elem.scrollHeight );
                    }

                };

获取输入框中的光标位置

                $.fn.getCursorPosition = function () {
                    var el = $(this).get(0);
                    var pos = 0;
                    if ('selectionStart' in el) {
                        pos = el.selectionStart;
                    } else if ('selection' in document) {
                        el.focus();
                        var Sel = document.selection.createRange();
                        var SelLength = document.selection.createRange().text.length;
                        Sel.moveStart('character', -el.value.length);
                        pos = Sel.text.length - SelLength;
                    }
                    return pos;
                };

jQuery设置光标停留位置在文本最后（或在具体的位置）的办法

如何让div 或 p 标签可编辑里面的内容：添加 contenteditable="true" 即可

contenteditable="true" 的P标签如何获取到光标之前的内容，先获取光标的索引，再获取所有内容

 //获取new-content的光标位置
    function getNewContentPosition($text){
        var selection = window.getSelection();
        var index = selection.focusOffset;//有换行时，只能获取到那一行的光标索引
        var data = selection.focusNode.data;//光标那一行的数据
        var allData = $text.val();
        return allData.indexOf(data.toUpperCase()) + index;
    }

//获取new-content的所有内容
    function getNewContent($newContent) {
        return $newContent.html().replace(/<div>/g,'\n').replace(/<\/div>/g,'').toUpperCase();
    }

判断鼠标有没有中值：

var txt = window.getSelection?window.getSelection():document.selection.createRange().text;
if(txt == ''){console.log('没有选中值')}

判断是否按了ctr

var isCtrlKey = e.ctrlKey;
var isCommandKey = e.metaKey;//苹果mac 的ctr键是 command

转载于:https://www.cnblogs.com/pfcan66/p/10814732.html

标签

#javascript #ViewUI

原文链接：http://www.cnblogs.com/pfcan66/p/10814732.html>

Vue3实战：自定义组合键实现智能换行与光标定位本文详细解析了在Vue3项目中实现自定义组合键（如Shift+Enter）进行智能换行与光标精准定位的完整方案。针对聊天室等场景中Enter键发送消息与换行需求冲突的核心痛点，文章从键盘事件监听、文本分割重组、利用nextTick进行光标定位等核心原理入手，提供了手把手的代码实战与可复用的Composable函数封装，并分享了跨平台兼容性、性能优化等进阶避坑指南。阅读详情

获取textarea文本框所选字符光标位置索引，以及选中的文本值；textarea高度自适应，随着内容增加高度增加；获取输入框中的光标位置...

相关推荐