jquery實現的在游標處插入文字程式碼例項
有時候我們需要在游標所在處插入指定的內容,可以說這種操作應用相當的頻繁,本章節通過一段程式碼例項介紹一下如何實現此效果,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>在游標處插入文字-螞蟻部落</title> <style type="text/css"> body{ padding:50px; } .cont{ cursor:pointer } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> (function($){ $.fn.extend({ "insert":function(value){ value=$.extend({ "text":"123" },value); var dthis=$(this)[0]; //IE下 if(document.selection){ $(dthis).focus(); var fus=document.selection.createRange(); fus.text=value.text; $(dthis).focus(); } //火狐下標準 else if(dthis.selectionStart || dthis.selectionStart == '0'){ var start=dthis.selectionStart; var end=dthis.selectionEnd; var top=dthis.scrollTop; dthis.value=dthis.value.substring(0,start)+value.text+dthis.value.substring(end,dthis.value.length); } else{ this.value+=value.text; this.focus(); } return $(this); } }) })(jQuery) $(function(){ $(".cont").click(function(){ $(".tarea").insert({"text":"螞蟻部落"}); }) }) </script> </head> <body> <div class="cont">點選我</div> <textarea class="tarea" name="" cols="50" rows="15">原來的內容</textarea> </body> </html>
相關文章
- 模擬實現文字框游標效果程式碼例項
- jQuery實現的刪除指定標籤程式碼例項jQuery
- js實現jquery的extend()程式碼例項JSjQuery
- jQuery實現的tab選項卡程式碼例項jQuery
- jquery實現的選項卡效果例項程式碼jQuery
- jquery實現的分頁效果例項程式碼jQuery
- jQuery實現的隔行變色程式碼例項jQuery
- jquery實現的滑動門程式碼例項jQuery
- js實現文字框提示程式碼例項JS
- jQuery實現滑動門程式碼例項jQuery
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- jQuery自定義標籤程式碼例項jQuery
- js實現的文字垂直滾動例項程式碼JS
- jquery實現的解析xml檔案程式碼例項jQueryXML
- jQuery實現的數字分頁程式碼例項jQuery
- jQuery實現的非同步請求程式碼例項jQuery非同步
- jQuery實現的錨點平滑定位程式碼例項jQuery
- jquery實現的滑動軸效果程式碼例項jQuery
- jQuery實現的JSONP應用程式碼例項jQueryJSON
- jQuery實現的div垂直水平居中例項程式碼jQuery
- jquery實現的下拉和收縮程式碼例項jQuery
- jquery.idTabs實現的選項卡程式碼例項jQuery
- 在頁面中插入flash的程式碼例項
- jQuery實現設定字型大小程式碼例項jQuery
- 操作文字域內游標的jQuery程式碼jQuery
- jQuery刪除html標籤程式碼例項jQueryHTML
- jQuery實現的自動播放簡單程式碼例項jQuery
- jQuery實現的簡單投票簡單程式碼例項jQuery
- jQuery實現的禁用右鍵選單程式碼例項jQuery
- 使用jquery實現的清空表單元素程式碼例項jQuery
- jquery實現的iframe高度自適應程式碼例項jQuery
- jQuery實現的刪除指定子元素程式碼例項jQuery
- jQuery實現的圖片預載入程式碼例項jQuery
- jQuery is() 程式碼例項jQuery
- jQuery的ajax實現的刪除記錄程式碼例項jQuery
- jquery實現獲取outerHTML內容程式碼例項jQueryHTML
- jQuery實現圖片預載入程式碼例項jQuery
- jQuery實現的滑鼠滑過圖片上縮彈出文字說明程式碼例項jQuery