该方法使用方式：
iptId=需要插入内容的输入框节点id
textClass=要插入的内容节点class；
举例：
<html>
<input id="input" type="text" value="12345" />
<a class="msg">插入该内容</a>
</html>
<script>
$(function(){
//假如输入框当前光标聚焦到了3和4之间,那么我点击a标签之后，
a标签的内容就会插入到输入框的3和4之间，
假如我没有聚焦过输入框，那么点击a标签内容会默认往最后面插入
getIptCursorInsertContent ('input', 'msg');
});
</script>
//获取输入框光标位置，插入内容到光标位置
var getIptCursorInsertContent = function(iptId,textClass){//iptId=被插入的输入框节点id,textClass=要插入的内容节点class,这个class可以多个,
var $iptId = document.getElementById(iptId), //获取输入框节点
index = null;//光标所在输入框的位置下标,初始化为null
$(document).off('click','.'+textClass).on('click','.'+textClass,function () {//给要插入的内容节点绑定点击事件
var val = $iptId ? $iptId.value : '',//获取输入框现在的值
value = '';
if(index === null || index > val.length){//如果index = null或者大于当前输入框的值的长度,则默认把内容插入到输入框最后
index = val.length; //获取当前输入框内容的长度
}
value = val.substring(0,index);
val = val.substring(index) || '';
value += $(this).attr('data-value') + val; //获取当前要插入的内容,这个内容需要用data-value来保存,因为不确定要插入的值到底是当前节点的html内容还是别的值
$iptId ? $iptId.value = value : '';
index += $(this).attr('data-value').length;//把光标下标位置改变成插入当前的内容之后的下标位置
});
$(document).off('click keyup','#'+iptId).on('click keyup','#'+iptId,function () { //给被插入内容的输入框节点绑定事件
var cursurPosition=0;
if(this.selectionStart){//非IE
cursurPosition= this.selectionStart;
}else{//IE
try{
var range = document.selection.createRange();
range.moveStart('character',-this.value.length);
cursurPosition = range.text.length;
}catch(e){
cursurPosition = 0;
}
}
index = cursurPosition; //上面是去获取当前光标所在位置,如果还没有聚焦获取过光标,那么index = 0
});
};
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
