zoukankan      html  css  js  c++  java
  • 获取textarea文本框所选字符光标位置索引,以及选中的文本值;textarea高度自适应,随着内容增加高度增加;获取输入框中的光标位置

    获取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,'
    ').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
  • 相关阅读:
    二级菜单
    侧面导航
    QFileDialog文件保存
    GitHub for window
    Qt学习事件/信号
    开始RTThread之旅
    Qt事件过滤器
    LPC1768开发板液晶问题解决
    用QSplitter分裂器实现QTextEdit窗口大小的变化
    Qt之串口编程使用事件驱动来触发接收数据
  • 原文地址:https://www.cnblogs.com/pfcan66/p/10814732.html
Copyright © 2011-2022 走看看