jquery实现在光标位置插入内容的方法
本文实例讲述了jquery实现在光标位置插入内容的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtml>
<html>
<head>
<title>无标题页</title>
<scripttype="text/javascript"src="jquery-1.7.2.min。js"></script>
<scripttype="text/javascript">
(function($){
$.fn.extend({
insertAtCaret:function(myValue){
var$t=$(this)[0];
if(document.selection){
this.focus();
sel=document.selection.createRange();
sel.text=myValue;
this.focus();
}else
if($t.selectionStart||$t.selectionStart=='0')
{
varstartPos=$t.selectionStart;
varendPos=$t.selectionEnd;
varscrollTop=$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;
}else{
this.value+=myValue;
this.focus();
}
}
})
})(jQuery);
$(document).ready(function(){
$("#numd").bind("mouseleave",function(){
document.getElementById('keybored').style.display='none';
document.getElementById('Nm').blur();
});
$("#Nm").focus(function(){
document.getElementById('keybored').style.display='';
});
$(".readbtns").click(function(){
$("#Nm").insertAtCaret($(this).val());
});
});
</script>
</head>
<body>
<ul>
<li>
<input/>
<div>
</div>
</li>
</ul>
<inputid="hid"type="text"value=""style="display:none"/>
<spanid="numd"style="border:1pxsolidred;clear:both;display:inline-block;font:800em;">
<inputtype="text"id="Nm"name="Nm"value=""/>
<divstyle="display:none;border:1pxsolid#A2B4C6;width:150px;height:400px;"
id="keybored">
<inputtype="button"class="readbtns"value="1"/>
<inputtype="button"class="readbtns"value="2"/>
<inputtype="button"class="readbtns"value="3"/>
<inputtype="button"class="readbtns"value="4"/>
<inputtype="button"class="readbtns"value="5"/>
<inputtype="button"class="readbtns"value="6"/>
<inputtype="button"class="readbtns"value="7"/>
<inputtype="button"class="readbtns"value="8"/>
<inputtype="button"class="readbtns"value="9"/>
</div>
</span>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。