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

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);
});

时间: 2024-08-29 00:16:07

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

vb.net机房收费 &amp; Register文本框为空提示,一键清空文本框所有内容

已经第二次机房收费系统重构了,一遍当然得有一遍的效果,正如对于文本框为空的提示方法,回顾第一遍机房,那些傻里傻气的If语句让自己对代码的亲和度大打折扣啊!那么到底有什么办法解决那些重复性的判断呢?这时候我们就要提到所谓的Model窗体了.在Model窗体中,建立一个封装数组,当窗体中需要判断大量文本框为空的时候,只需简单的调用即可. 新建一个Model类,来存放公共需要的部分. 1.定义一个结构体Term,且用结构体封装一个数组 Public Structure Term '定义结构体term

jquery限制文本框只能输入数字、JQuery 限制文本框只能输入数字和小数点

/*JQuery 限制文本框只能输入数字及小数点 */ <script> $(function(){ /*JQuery 限制文本框只能输入数字*/ $("#id").keyup(function(){ $(this).val($(this).val().replace(/\D|^0/g,'')); }).bind("paste",function(){  //CTR+V事件处理 $(this).val($(this).val().replace(/\D|

移动端文本框被原生键盘弹出后挡住文本框

html: <input id="val_name" type="text" placeholder="姓名"  onfocus="fup(val_name)" onblur="fdown(val_name)" > js: function fup(id){ setTimeout(function () { id.scrollIntoView(true); },100) } function f

JS将光标移动到文本框后面

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascrip

js设置文本框只读属性的小bug

在js中设置文本框为只读属性的时候 , document.getElementById('你文本框的id').readOnly=true; 如果页面刚开始加载, 该文本框就获得焦点了,只读属性就不成立,该文本框就可以被编辑. 所以需要加一行代码让页面加载时就失去该文本框的焦点, window.onload = function(){ document.getElementById('您文本框的id').blur(); document.getElementById('你文本框的id').read

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

在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如“满100打5折,满200打4折,满500打3折”等等,这是作为一组方案来执行的,但是并不确定一组方案中有几个子方案,所以,这里我用JS进行添加删除子方案,并要对方案输入的正确性加以判断,并且通过json传输写入数据库,这里我们主要写如果添加删除一组子项目和如果给每个文本框添加验证. 动态添加一组文本框: var countTable = 0;

JS控制文本框内键盘上下左右键的焦点

avaScript键盘上下左右控制文本框焦点的方法有很多,这里简单说两种方法: 方法一: 创建一个table的dom元素,包含5行4列的文本框 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">      <html>        <head>              <title>keyboard control 1</title>       

1.1 文本框

1.1 文本框1.1.1 基本形制<input type="text" value="abcd"/> 1.1.1.2 常用属性1.1.1.2.1 类型type用于设置文本框的外观类型,type值为text表示该表单元素是文本框,为password表示该表单元素是密码框,为hidden表示该表单元素是隐藏框,为button则表示该表单元素是按钮控件 1.1.1.2.2 值value用于存取文本框中的文字,同时写在html代码里的value也是文本框的默认值

asp.net 微信企业号办公系统-表单设计-文本框

点击表单设计器工具栏上的文本框按钮,会弹出文本框属性对话框: 绑定字段:该文本框与表单属性设置中选择的表的某个字段绑定(该文本框中的值将会保存到该字段中). 默认值:该文本框的初始化值. 宽度:文本框的宽度,如:200px,60%格式. 最大字符数:文本框可输入的最大字符数,对应 maxlength 属性. 输入类型:明文或者密码类型,对应input 的type='text'或type='password'. 值类型:输入的文本类型,表单提交时会验证输入的类型是否符合规定. 事件:可以给文本框绑