js:

/*******************************************
 *
 * 插入光标处的插件
 * @authors Du xin li
 * @update    2015-10-25
 *
*********************************************/

$.fn.extend({  
    insertContent : function(myValue, t) {  
        var that = $(this);
        var $t = $(this)[0];  
        if (document.selection) {  
            this.focus();  
            var sel = document.selection.createRange();  
            sel.text = myValue;  
            this.focus();  
            sel.moveStart('character', -l);  
            var wee = sel.text.length;  
            if (arguments.length == 2) {  
            var l = $t.value.length;  
            sel.moveEnd("character", wee + t);  
            t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length);  
            sel.select();  
            }  
        } else if ($t.selectionStart || $t.selectionStart == '0') {  
            var startPos = $t.selectionStart;  
            var endPos = $t.selectionEnd;  
            var scrollTop = $t.scrollTop;  
            $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos,$t.value.length);  
            this.focus();  
            $t.selectionStart = startPos + myValue.length;  
            $t.selectionEnd = startPos + myValue.length;  
            $t.scrollTop = scrollTop;  
            if (arguments.length == 2) {
                $t.setSelectionRange(startPos - t,$t.selectionEnd + t);  
                this.focus();
            }  
        } else {                              
            this.value += myValue;                              
            this.focus();  
        }  
    }  
})

使用方法:

/**
* 点击表情按钮插入表情方法
* @param {string} dom 任意子节点
* @param {Object} event event对象
*/
fc.emote = function(dom, event){
if (dom) {
this.setParam(dom);
} else {
return false;
}
var that = $(dom);
var e = window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
//显示表情弹出层
$('.fresh-dialog-emote').removeClass('hide');
//当前文本框textarea
var _currentTextarea = this.param.form;
//点击表情插入文本框
$('.fresh-dialog-emote').off('click', '.fresh-jsSmilies li').on('click', '.fresh-jsSmilies li', function(){
var _val = $(this).data('action');
console.log(_val)
console.log(_currentTextarea.length)
_currentTextarea.focus();
_currentTextarea.insertContent(_val);
$('.fresh-dialog-emote').addClass('hide');
})
}

// 点击表情按钮,弹出表情弹出层
$('.fresh-list').off('click', '.fresh-comment-emote-btn').on('click', '.fresh-comment-emote-btn', function(event){
fresh.comment.emote(this, event);
});

js实现文本框文本域光标处插入图片文本的插件(并且光标在插入内容的内容后显示)的更多相关文章

  1. EasyUI实现图片的上传后与其他文本框的提交以及DataGrid中图片的展示

    图片即文件,在jsp中文件上传很简单,一个type为file的input,一个form指定enctype为multipart/form-data,通过post提交到后台利用apache的commons ...

  2. 文本框 textarea 动态显示行数(简单文本编辑器)

    工作需求做一个文本编辑器简单的. 右边输入文字,左边会显示相应的代码行.清空也会变为1. 废话不多说上代码,自己理解. <style type="text/css"> ...

  3. 文本框复制代码,兼容大部分浏览器(ZeroClipboard插件、附件)

    ;;list-style-type:none;} a,img{;} body{font:12px/180% Arial, Helvetica, sans-serif ,"新宋体"; ...

  4. js实现文本框或文本域在用户输入时(oninput)触发事件,操作元素

    写在前面:给不同的文本框设定同样的效果,当文本框没有内容输入时,‘下一步’按钮不可用且透明度为0.5.当有内容输入时(并不是获得焦点时focus),‘下一步’按钮状态可用, 且透明度为1. <s ...

  5. 小tip:FireFox下文本框/域百分比padding bug解决——张鑫旭

    一.问题描述 我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况. 如下效果图: 在窄屏下,上面的文本框宽度也要跟着外部宽度变小. 难点对于文本框或者文本域,光标最好距离左侧边缘有 ...

  6. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  7. JS添加删除一组文本框并对输入信息加以验证

    在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如“满100打5折,满200打4折,满500打3 ...

  8. 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js

    做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...

  9. JS和vue文本框输入改变p标签的内容测试

    文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试: 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给 ...

随机推荐

  1. iOS应用之间的跳转

    app应用跳转的原理解析 如何实现两个app应用之间的跳转 如何实现两个app之间跳转到指定界面 二.应用跳转原理 相信从一个应用跳转到另一个应用大家并不陌生,最常见的莫过于第三方登录,支付宝支付等等 ...

  2. Nginx 和 PHP 的两种部署方式比较

    2种部署方式简介 第一种 前置1台nginx服务器做HTTP反向代理和负载均衡 后面多态服务器部署Nginx Web服务和php-fpm提供的fast cgi服务 第二种 前置1台nginx服务器做W ...

  3. 软件公司的两种管理方式 总体来说,这个世界上存在两种不同的软件公司的组织结构。我把他们叫做 Widget Factory(小商品工厂) 和 Film Crews(电影工作组

    软件公司的两种管理方式 一个简单的回答应该是——“因为在我们的社会里,我们总是会认为薪水和会和职位的层次绑在一起”.但是,这个答案同时也折射出一个事实——我们的薪资是基于我们的所理解的价值,但这并没有 ...

  4. Rplidar学习(一)—— 开发套件初识

    一.简介 RPLIDAR A1 开发套装包含了方便用户对 RPLIDAR A1 进行性能评估和早期开发所需的配套工具. 用户只需要将 RPLIDAR A1 模组与 PC 机连接,即可在配套的评估软件中 ...

  5. HDU 3999 The order of a Tree (先序遍历)

    The order of a Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  6. codesmith连接postgresql修复bug

    转:CodeSmith7代码生成器针对PostgreSQL数据库无法使用的Bug修复全过程 我自己又修改过,完整的PostgreSQLSchemaProvider.cs文件如下 using Npgsq ...

  7. SDL操作笔记

    原文地址:https://blog.csdn.net/qq_38124598/article/details/73543184 这里总结一下个人对SDL的一些函数,方便以后查询.   v1.0.1 1 ...

  8. 学习笔记之 curl 命令用法详解

    [前言]     本文翻译和整理自 Linux-2.6.32 中和 curl 相关的 Manual Page 描述文档. 文档目的仅在提醒读者所遗忘的知识点,故在整理时削弱了阅读流畅性,适用于对 cu ...

  9. springmvc 自定义注解

    1. 自定义一个注解 @Documented //文档生成时,该注解将被包含在javadoc中,可去掉 @Target(ElementType.METHOD)//目标是方法 @Retention(Re ...

  10. 订单状态 Mark

    ) { ) { ) { ) { ) { ) { ) { ) { ) { ) { ) { ) { ) { ) { ))) { ))) { ))) { ))) { )); } else { Assert. ...