获取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;
                };

原文地址:https://www.cnblogs.com/pfcan66/p/10814732.html

时间: 2024-12-30 03:50:24

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

textbox 文本框限制输入字符个数问题

1.一般情况下我们会想到的是使用它的MaxLength就可以达到目的 2.如果我们需要一个多行的文本框我们就会设置一下文本框的textmode="multiline",这时候我们会发现maxlength不再起作用了,在某个项目中我也遇到了这样的问题当时我是使用js做的处理 ? 1 2 3 function textCouter (field,maxlimit){  if(field.value.length >maxlimit)    field.value=field.valu

Ext.net里面放置KindEditor富文本框(解决KindEditor不显示和后台取不到值的问题)

上周六,从上午10点到晚上12点终于搞定了Ext.net与KindEditor的兼容性问题.对于Ext.net的原理,我是菜鸟,表示不懂.我遇到的两个问题是,问题一是不显示KindEditor控件,通过ext:ResourceManager里面的 <DocumentReady Handler="createEditor();" /> 解决了,问题二是KindEditor控件的值传不会后台去,就是在前台也收不到值,但是我通过点击全屏按钮后就可以收到其值了,于是采用<Cl

input输入框中的光标大小显示不一致

ie7中和chrome的非常明显 先看看问题产生的原因:chrome浏览器对光标高度的设置原则为,当没有内容的时候光标的高度=input的line-height的值,当有内容时,光标从input的顶端到文字的底部. OK,既然知道了原因,我们就相应才去一些措施.尝试了两种方法去做:. 方法1:将line-height的值设置为跟字体大小一致:如果高度达不到,用padding去撑: 方法2:对chrome不设置line-height,它会自动文字居中,对ie进行hack设置line-height的

windows程序设计获取文本框(窗口、对话框)文本

就是这样一个简单的界面,窗口上重绘的对话框(这种写法参考我之前博文): 需要做到的就是点击确定,获取文本框中内容. // 处理对话框消息 INT_PTR CALLBACK NewDlgProc(HWND hdlg, UINT msg, WPARAM wParam, LPARAM lParam) { int ret_num; HWND hwnd; WCHAR buff[32]; switch (msg) { case WM_COMMAND: { switch(LOWORD(wParam)) { c

如何让 textarea 文本框 高度自动伸缩

个人博客:柚子青年. 原文链接:如何让 textarea 文本框 高度自动伸缩 本文主要讲的是如何让 textarea 文本框 自动伸缩 原理:每次输入文字后重置文本框默认高度 判断是否出现滚动条 动态修改高度 . $(this).change(function () { this.style.height = 'height'; // height = textarea 默高度 if (this.scrollHeight >= this.offsetHeight) { // 判断是否出现滚动条

iOS_book 02 - 基本交互(约束、视图控制器、基本控件:按钮、文本框、分段控件、开关、标签、图像控件)

实现基本交互 MVC模式 Cocoa Touch 设计者们采用MVC(Model-View-Controller, 模型 - 视图 - 控制器)模式作为指导原则. MVC 模式把代码功能划分为3个不同的类别. 模型: 保存应用程序数据的类. 视图:包括窗口.控件以及其他一些用户可以看到并能与之交互的元素. 控制器:把模型和视图绑定在一起的代码,包括处理用户输入的应用程序逻辑. MVC的目标最大限度地分离这三类代码.MVC可以帮助确保代码的最大可重用性. 控制器组件通常有应用程序的具体类组成.控制

富文本框KindEditor的使用技巧

富文本框KindEditor的使用技巧 最近在项目中经常遇到使用富文本框的情况,当然我们所接触的富文本.框有很多,我个人还是比较偏向于KE(KindEditor)),用起来比较舒服,但是很多新手在用的时候往往会感到不知所措.总感觉API写了很多但是就是不知道怎么去用,今天我就和大家讲讲KE的使用和基本技巧: 第一步:我们需要到官网上引用相关的资源包,点击进入官网下载资源包 第二步:引用资源文件 如图所示第一个default.css主要是为了修改我们KE的样式,第二个kindeditor-min.

Windows static控件(静态文本框控件)

文本不克不及主动换行,超越窗口规模会被隐蔽: 每次更改文本都要先擦除配景再从新输入,比拟费事. 实践开辟中普通运用静态文本框控件来输入文本.静态文本框是Windows 的一种规范控件,可以用来在窗口上显示一段文本,而且文本轻易遭到掌握.除了静态文本框,Windows的规范控件还有许多种,例如按钮.下拉菜单.单选按钮.复选框等.其实,控件也是一种窗口,也运用 CreateWindow 函数来创立.然则它们运用的窗口类的名字比拟特别,是由Windows预界说的:静态文本框控件的窗口类名是static

【Java GUI】文本框和文本区

文本框 文本框(JTextField)是界面中用于输入和输出一行文本的框.JTextField类用来建立文本框.与文本框相关的接口是ActionListener. 文本框处理程序的基本内容有以下几个方面: ①声明一个文本框名. ②建立一个文本框对象. ③将文本框对象加入到某个容器. ④对需要控制的文本框对象注册监视器,监听文本框的输入结束(即输入回车键)事件. ⑤一个处理文本框事件的方法,完成对截获事件进行判断和处理. JTextField类的主要构造方法 JTextField();//文本框的