ExtJs之重写TextArea捕获TextArea中光标

工作使用ExtJs,一直也仅仅是使用ExtJs中的相关控件而已,也没有重写过相关的控件,最近业务需要重新重写了TextArea控件,主要是为了获取TextArea中光标的位置

me.downTextArea = Ext.create('Ext.form.field.TextArea', {

                    name : 'rightEditText'

                });

        Ext.override(me.downTextArea, {

                    getCaretPosition : function() {

                        var el = this.inputEl.dom;

                        if (typeof(el.selectionStart) === "number") {

                            return el.selectionStart;

                        } elseif (document.selection && el.createTextRange) {

                            var range = document.selection.createRange();

                            range.collapse(true);

                            range.moveStart("character", -el.value.length);

                            return range.text.length;

                        } else {

                            throw'getCaretPosition() not supported';

                        }

                    },

                    setCaretPosition : function(pos) {

                        var ctrl = this.inputEl.dom;

                        if (ctrl.setSelectionRange) {

                            ctrl.focus();

                            ctrl.setSelectionRange(pos, pos);

                        } elseif (ctrl.createTextRange) {

                            var range = ctrl.createTextRange();

                            range.collapse(true);

                            range.moveEnd('character', pos);

                            range.moveStart('character', pos);

                            range.select();

                        }

                    }

                });

重写的代码是从网上参照其他博客写的,这里只是为了记录。


ExtJS 6.2.0 ,`TextArea` 组件本身并没有内置的可选项功能,类似于 `ComboBox` 组件。但是,您可以通过自定义的方式实现类似的效果。 一种常见的方法是使用 `TextArea` 组件结合 `Menu` 组件来创建一个可选择的下拉菜单。当用户选择菜单项时,将选项的值插入到 `TextArea` 。 以下是一个示例代码: ```javascript // 创建一个 TextArea 组件 var textArea = Ext.create('Ext.form.field.TextArea', { // 配置项... }); // 创建一个下拉菜单 var menu = Ext.create('Ext.menu.Menu', { items: [ { text: 'Option 1', value: 'Option 1' }, { text: 'Option 2', value: 'Option 2' }, { text: 'Option 3', value: 'Option 3' } ], listeners: { click: function (menu, item) { // 将选项的值插入到 TextArea var currentValue = textArea.getValue(); var newValue = currentValue ? currentValue + '\n' + item.value : item.value; textArea.setValue(newValue); } } }); // 将下拉菜单绑定到 TextArea 的特定事件上,例如点击事件 textArea.on('click', function () { menu.showBy(textArea); }); ``` 在这个示例,我们首先创建了一个 `TextArea` 组件和一个下拉菜单 `Menu`。在菜单项被点击时,我们将选项的值插入到 `TextArea` 。然后,我们将下拉菜单绑定到 `TextArea` 的特定事件上(例如点击事件),当用户点击 `TextArea` 时,下拉菜单将显示在 `TextArea` 的位置上。 请注意,这只是一种实现可选项效果的方式,您可以根据实际需求进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值