jquery在光标位置插入内容指定内容(input、textarea)通用

简介: jquery在光标位置插入内容指定内容(input、textarea)通用

html代码

<textarea id="content" class="layui-textarea"></textarea>
<li onclick="insertHtml('插入内容')" >插入</li>

JS代码

$('#content').on('select',function () {
        message.setCaret(this);
    }).on('click',function () {
        message.setCaret(this);
    }).on('keyup',function () {
        message.setCaret(this);
    });
    function insertHtml(val) {
        var textareaStr = $('#content').val();
        message.insertAtCaret($('#content')[0],'{'+val+'}');
    }

    var message = {
        setCaret: function (textObj) {
            if (textObj.createTextRange) {
                textObj.caretPos = document.selection.createRange().duplicate();
            }
        },

        insertAtCaret: function (textObj, textFeildValue) {
            if (document.all) {
                if (textObj.createTextRange && textObj.caretPos) {
                    var caretPos = textObj.caretPos;
                    caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? textFeildValue + ' ' : textFeildValue;
                } else {
                    textObj.value = textFeildValue;
                }
            } else {
                if (textObj.setSelectionRange) {
                    var rangeStart = textObj.selectionStart;
                    var rangeEnd = textObj.selectionEnd;
                    var tempStr1 = textObj.value.substring(0, rangeStart);
                    var tempStr2 = textObj.value.substring(rangeEnd);
                    textObj.value = tempStr1 + textFeildValue + tempStr2;
                } else {
                    alert("此版本的Mozilla浏览器不支持setSelectionRange");
                }
            }
        }
    }
目录
相关文章
|
10月前
|
JavaScript
jQuery 回车换行、input悬浮全选...
jQuery 回车换行、input悬浮全选...
48 0
|
8月前
|
JSON JavaScript 数据格式
jQuery数据结构渲染(3):文本和input/textarea框赋值
jQuery数据结构渲染(3):文本和input/textarea框赋值
36 1
|
8月前
|
JavaScript BI
jQuery根据填写的input的数值导出excel表格
jQuery根据填写的input的数值导出excel表格
36 0
|
8月前
|
JavaScript
jQuery动态生成input填写时间值并且提交给后端
jQuery动态生成input填写时间值并且提交给后端
41 0
|
8月前
|
JavaScript
jquery动态生成input,并且限制生成个数
jquery动态生成input,并且限制生成个数
29 0
|
8月前
|
JavaScript
jQuery点击按钮,生成input输入框
jQuery点击按钮,生成input输入框
37 0
|
10月前
|
JavaScript
jQuery val(); input 获取与设置默认输入内容
jQuery val(); input 获取与设置默认输入内容
49 0
|
10月前
|
JavaScript
jQuery控制input的字数
jQuery控制input的字数
|
2月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
3天前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
10 1