操作文字域內游標的jQuery程式碼
有時候需要對文字域內的游標進行精準的操作,但是原生javascript或者jQuery中並沒有預設給定這樣的程式碼,或者給定的程式碼並沒有很好的實現想要的操作,下面就是一段自定義封裝的操作游標的程式碼,下面進行一下分享。
程式碼如下:
[JavaScript] 純文字檢視 複製程式碼;(function($){ /* * 文字域游標操作(選、添、刪、取)的jQuery擴充套件 */ $.fn.extend({ /* * 獲取游標所在位置 */ iGetFieldPos:function(){ var field=this.get(0); if(document.selection){ //IE $(this).focus(); var sel=document.selection; var range=sel.createRange(); var dupRange=range.duplicate(); dupRange.moveToElementText(field); dupRange.setEndPoint('EndToEnd',range); field.selectionStart=dupRange.text.length-range.text.length; field.selectionEnd=field.selectionStart+ range.text.length; } return field.selectionStart; }, /* * 選中指定位置內字元 || 設定游標位置 * --- 從start起選中(含第start個),到第end結束(不含第end個) * --- 若不輸入end值,即為設定游標的位置(第start字元後) */ iSelectField:function(start,end){ var field=this.get(0); //end未定義,則為設定游標位置 if(arguments[1]==undefined){ end=start; } if(document.selection){ //IE var range = field.createTextRange(); range.moveEnd('character',-$(this).val().length); range.moveEnd('character',end); range.moveStart('character',start); range.select(); } else{ //非IE field.setSelectionRange(start,end); $(this).focus(); } }, /* * 選中指定字串 */ iSelectStr:function(str){ var field=this.get(0); var i=$(this).val().indexOf(str); i != -1 ? $(this).iSelectField(i,i+str.length) : false; }, /* * 在游標之後插入字串 */ iAddField:function(str){ var field=this.get(0); var v=$(this).val(); var len=$(this).val().length; if(document.selection){ //IE $(this).focus() document.selection.createRange().text=str; } else{ //非IE var selPos=field.selectionStart; $(this).val($(this).val().slice(0,field.selectionStart)+str+$(this).val().slice(field.selectionStart,len)); this.iSelectField(selPos+str.length); }; }, /* * 刪除游標前面(-)或者後面(+)的n個字元 */ iDelField:function(n){ var field=this.get(0); var pos=$(this).iGetFieldPos(); var v=$(this).val(); //大於0則刪除後面,小於0則刪除前面 $(this).val(n>0 ? v.slice(0,pos-n)+v.slice(pos) : v.slice(0,pos)+v.slice(pos-n)); $(this).iSelectField(pos-(n<0 ? 0 : n)); } }); })(jQuery);
使用說明:
[JavaScript] 純文字檢視 複製程式碼獲取游標位置:$(elem).iGetFieldPos() 設定游標位置:$(elem).iSelectField(start) 選中指定位置內的字元:$(elem).iSelectField(start,end) 選中指定的字元:$(elem).iSelectStr(str) 在游標之後插入字串:$(elem).iAdd(str) 刪除游標前面(-n)或者後面(n)的n個字元:$(elem).iDel(n)
相關文章
- jquery實現的在游標處插入文字程式碼例項jQuery
- jQuery點選文字框清除內容程式碼例項jQuery
- jquery監聽文字框內容變化程式碼例項jQuery
- jQuery表單操作程式碼jQuery
- 模擬實現文字框游標效果程式碼例項
- jQuery操作cookie程式碼例項jQueryCookie
- Android 滑鼠游標的圖形合成Android
- 控制input輸入框游標的位置
- jQuery操作checkbox選擇程式碼jQuery
- jQuery操作select下拉常用程式碼jQuery
- jQuery陣列相關操作程式碼jQuery陣列
- jquery操作cookie外掛程式碼分享jQueryCookie
- jQuery操作表格table程式碼例項jQuery
- app直播原始碼,Android EditText的游標的顯示和隱藏APP原始碼Android
- jQuery文字框輸入內容同步jQuery
- 深入理解父遊標,子游標的概念
- jQuery操作單選按鈕程式碼示例jQuery
- jQuery操作select下拉選單程式碼jQuery
- jQuery文字框內容輸入同步功能jQuery
- Stax處理XML(一)——基於游標的查詢XML
- jQuery操作select下拉選單常用程式碼jQuery
- jQuery實現的輸入文字計數功能程式碼jQuery
- 游標操作快捷鍵
- Oracle遊標共享,父遊標和子游標的概念Oracle
- jQuery操作iframe子頁中元素程式碼例項jQuery
- jQuery操作select下拉選單程式碼例項jQuery
- 10個超棒jQuery表單操作程式碼片段jQuery
- 動態遊標的操作~~~
- jquery驗證元素內容是否為空程式碼jQuery
- PLC結構化文字(ST)——區域程式碼摺疊(Region)
- jQuery實現的文字輸入字數倒計效果程式碼jQuery
- JavaScript讀取文字檔案內容程式碼例項JavaScript
- jquery實現獲取outerHTML內容程式碼例項jQueryHTML
- 指令碼程式設計之骰子游戲指令碼程式設計
- 獲取或者設定textarea文字域的內容
- 趣味小教程|在 macOS Monterey 中更改游標的顏色樣式Mac
- [20160516]SQL共享游標的測試疑問.txtSQL
- jQuery元素內容操作的方法有多少種?jQuery