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. 优化 App 的启动时间

    这是一篇 WWDC 2016 Session 406 的学习笔记,从原理到实践讲述了如何优化 App 的启动时间. App 运行理论 main() 执行前发生的事 Mach-O 格式 虚拟内存基础 M ...

  2. Linux内核的ioctl函数学习

    Linux内核的ioctl函数学习 来源:Linux公社  作者:Linux 我这里说的ioctl函数是在驱动程序里的,因为我不知道还有没有别的场合用到了ioctl, 所以就规定了我们讨论的范围.为什 ...

  3. Spring事务异常回滚,捕获异常不抛出就不会回滚

    最近遇到了事务不回滚的情况,我还考虑说JPA的事务有bug? 我想多了.......    为了打印清楚日志,很多方法我都加tyr catch,在catch中打印日志.但是这边情况来了,当这个方法异常 ...

  4. 【C语言】字符串与整型数值之间的转换

    一.将字符串转化为对应的数值 /*============================================================================= # # F ...

  5. Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串

    Jquery 选择器 详解   在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...

  6. 《JAVA与模式》之解释器模式 (转载)

    一.引子 其实没有什么好的例子引入解释器模式,因为它描述了如何构成一个简单的语言解释器,主要应用在使用面向对象语言开发编译器中:在实际应用中,我们可能很少碰到去构造一个语言的文法的情况. 虽然你几乎用 ...

  7. MongoDB 学习笔记(9)--- Limit与Skip方法

    MongoDB Limit() 方法 如果你需要在MongoDB中读取指定数量的数据记录,可以使用MongoDB的Limit方法,limit()方法接受一个数字参数,该参数指定从MongoDB中读取的 ...

  8. Linux设备驱动Hello World程序介绍

    自古以来,学习一门新编程语言的第一步就是写一个打印“hello world”的程序(可以看<hello world 集中营>这个帖子供罗列了300个“hello world”程序例子)在本 ...

  9. selenium webdriver如何拿到页面的加载时间

    这个问题与语言无关,对于现代浏览器来说,使用 window.performance.timing这个对象就好了. 用execute_script方法(java用executeScript)方法执行 w ...

  10. 缓存机制和Hibernate的缓存机制介绍

    缓存是介于应用程序和物理数据源之间,其作用是为了降低应用程序对物理数据源访问的频次,从而提高了应用的运行性能.缓存内的数据是对物理数据源中的数据的复制,应用程序在运行时从缓存读写数据,在特定的时刻或事 ...