关于文本输入框获取光标位置以及指定位置插入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<textarea name="" id="edit" cols="100" rows="10"></textarea>
<button onclick="getPos()">获取光标位置</button>
<button onclick="getSelect()">获取选中内容</button>
<button onclick="insert()">插入文本</button>
<script>
    $.extend($.fn,{
        //获取文本框内光标位置
        getSelectionStart: function() {
            var e = this[0];
            if (e.selectionStart) {
                return e.selectionStart;
            } else if (document.selection) {
                e.focus();
                var r=document.selection.createRange();
                var sr = r.duplicate();
                sr.moveToElementText(e);
                sr.setEndPoint('EndToEnd', r);
                return sr.text.length - r.text.length;
            }

            return 0;
        },
        getSelectionEnd: function() {
            var e = this[0];
            if (e.selectionEnd) {
                return e.selectionEnd;
            } else if (document.selection) {
                e.focus();
                var r=document.selection.createRange();
                var sr = r.duplicate();
                sr.moveToElementText(e);
                sr.setEndPoint('EndToEnd', r);
                return sr.text.length;
            }
            return 0;
        },
        //自动插入默认字符串
        insertString: function(str) {
            $(this).each(function() {
                var tb = $(this);
                tb.focus();
                if (document.selection){
                    var r = document.selection.createRange();
                    document.selection.empty();
                    r.text = str;
                    r.collapse();
                    r.select();
                } else {
                    var newstart = tb.get(0).selectionStart+str.length;
                    tb.val(tb.val().substr(0,tb.get(0).selectionStart) +
                            str + tb.val().substring(tb.get(0).selectionEnd));
                    tb.get(0).selectionStart = newstart;
                    tb.get(0).selectionEnd = newstart;
                }
            });

            return this;
        },
        setSelection: function(startIndex,len) {
            $(this).each(function(){
                if (this.setSelectionRange){
                    this.setSelectionRange(startIndex, startIndex + len);
                } else if (document.selection) {
                    var range = this.createTextRange();
                    range.collapse(true);
                    range.moveStart('character', startIndex);
                    range.moveEnd('character', len);
                    range.select();
                } else {
                    this.selectionStart = startIndex;
                    this.selectionEnd = startIndex + len;
                }
            });

            return this;
        },
        getSelection: function() {
            var elem = this[0];

            var sel = '';
            if (document.selection){
                var r = document.selection.createRange();
                document.selection.empty();
                sel = r.text;
            } else {
                var start = elem.selectionStart;
                var end = elem.selectionEnd;
                var content = $(elem).is(':input') ? $(elem).val() : $(elem).text();
                sel = content.substring(start, end);
            }
            return sel;
        }
    })
</script>
<script>
    function getPos(){
        alert($("#edit").getSelectionStart());
    }
    function getSelect(){
        alert($("#edit").getSelection());
    }
    function insert(){
       $("#edit").insertString("hello");

    }
</script>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-01 07:19:30

关于文本输入框获取光标位置以及指定位置插入内容的相关文章

c#获取光标在屏幕中位置

需要调用win32api,winform.wpf通用 [DllImport("user32.dll")] public static extern bool GetCursorPos(out POINT lpPoint); [StructLayout(LayoutKind.Sequential)] public struct POINT { public int X; public int Y; public POINT(int x, int y) { this.X = x; this

【重要重要】如何在div是contentEditable=true的里面获取光标的位置,并在光标位置处插入内容。焦点位置插入指定内容

为什么要在contentEditable=true的div里面获取光标呢?因为这篇文章https://blog.csdn.net/qq_33769914/article/details/85002918我们知道想在一个内容里面插入一个新的内容,如果这个新的内容是段html代码.最后显示的是有样式的.那么用input是无法实现的. 所以我们考虑用contentEditable=true的div.在这里面输入的html就没问题啦.————————————————版权声明:本文为CSDN博主「夏天想」

获取光标位置

原文:https://blog.csdn.net/mafan121/article/details/78519348 html <iframe id="editor" width="600px" height="400px" style="border:solid 1px;"></iframe> <input type="txt" onclick="alert(get

给MySQL表增加指定位置的列

ALTER TABLE test ADD COLUMN id INT UNSIGNED NOT NULL auto_increment PRIMARY KEY FIRST 给表添加列是一个常用的操作,MySQL增加列的时候可以指定此列的位置 给指定位置加列需要两个关键字: FIRST和AFTER FIRST表示增加此列为第一个列 AFTER表示增加在某个列之后 注意MySQL增加列指定位置时没有BEFORE的用法,第一列可以使用FIRST,非第一列使用AFTER. 语法: ALTER TABLE

在script所在位置插入内容

上一篇文章document.write()的一些坑说了浏览器输出流关闭后使用document.write会清空当前页面,因此要避免在window.onload.$(document).ready()和ajax获取数据后使用document.write插入内容.但是这些常用操作又是很难避免的,那么在使用上述三种方法的时候能不能达到document.write()同样的效果呢? 其实是可以的实现的,我们知道js中除了可以用docuemnt.write插入内容,还可以使用appendChild,利用a

EditText设置/隐藏光标位置、选中文本和获取/清除焦点(转)

转:http://blog.csdn.net/dajian790626/article/details/8464722 有时候需要让光标显示在EditText的指定位置或者选中某些文本.同样,为了方便用户输入以提升用户体验,可能需要使EditText获得或失去焦点. 1. 设置光标到指定位置 EditText et = (EditText) findViewById(R.id.etTest); et.setSelection(2); PS:当内容过多时,可通过设置光标位置来让该位置的内容显示在屏

用js控制按钮时间,将指定内容添加到文本域的光标所在位置。

<pre class="javascript" name="code"> var fm = document.getElementsByTagName('form')[0]; var button = document.getElementsByName("button"); //获取一个cookie的值 function getCookie(index){ var allcookies = document.cookie; var

[Android教程]EditText设置/隐藏光标位置、选中文本和获取/清除焦点

有时候需要让光标显示在EditText的指定位置或者选中某些文本.同样,为了方便用户输入以提升用户体验,可能需要使EditText获得或失去焦点. 1. 设置光标到指定位置 EditText et = (EditText) findViewById(R.id.etTest); et.setSelection(2); PS:当内容过多时,可通过设置光标位置来让该位置的内容显示在屏幕上. 2. 隐藏光标 EditText et = (EditText) findViewById(R.id.etTes

js手动控制输入框的光标位置

功能:点击外部可选项将文字带入,并且光标在上一次位置后(类似于手机键盘点击) 两种场景: 1. 焦点没有进入文本框或者在文本框中最后,点击外部之后直接将内容加到后面然后跟上光标: 注:光标位置可能和焦点位置不一致,光标最多只能靠近右边框, 2.焦点在文本框且光标在已有文本的中间,例123,在1后,加入4后显示1423并且光标在4后: 在此展示我用的项目代码(angular的动态表单中) getConputation(item) { const formModel = this.formModel