關於文字輸入框獲取游標位置以及指定位置插入內容
阿新 • • 發佈：2019-02-06
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body> <textarea name="" id="edit" cols="100" rows="10"></textarea> <button onclick="getPos()">獲取游標位置</button> <button onclick="getSelect()">獲取選中內容</button> <button onclick="insert()">插入文字</button> <script> $.extend($.fn,{ //獲取文字框內游標位置 getSelectionStart: function() { var e = this[0]; if (e.selectionStart) { return e.selectionStart; } else if (document.selection) { e.focus(); var r=document.selection.createRange(); var sr = r.duplicate(); sr.moveToElementText(e); sr.setEndPoint('EndToEnd', r); return sr.text.length - r.text.length; } return 0; }, getSelectionEnd: function() { var e = this[0]; if (e.selectionEnd) { return e.selectionEnd; } else if (document.selection) { e.focus(); var r=document.selection.createRange(); var sr = r.duplicate(); sr.moveToElementText(e); sr.setEndPoint('EndToEnd', r); return sr.text.length; } return 0; }, //自動插入預設字串 insertString: function(str) { $(this).each(function() { var tb = $(this); tb.focus(); if (document.selection){ var r = document.selection.createRange(); document.selection.empty(); r.text = str; r.collapse(); r.select(); } else { var newstart = tb.get(0).selectionStart+str.length; tb.val(tb.val().substr(0,tb.get(0).selectionStart) + str + tb.val().substring(tb.get(0).selectionEnd)); tb.get(0).selectionStart = newstart; tb.get(0).selectionEnd = newstart; } }); return this; }, setSelection: function(startIndex,len) { $(this).each(function(){ if (this.setSelectionRange){ this.setSelectionRange(startIndex, startIndex + len); } else if (document.selection) { var range = this.createTextRange(); range.collapse(true); range.moveStart('character', startIndex); range.moveEnd('character', len); range.select(); } else { this.selectionStart = startIndex; this.selectionEnd = startIndex + len; } }); return this; }, getSelection: function() { var elem = this[0]; var sel = ''; if (document.selection){ var r = document.selection.createRange(); document.selection.empty(); sel = r.text; } else { var start = elem.selectionStart; var end = elem.selectionEnd; var content = $(elem).is(':input') ? $(elem).val() : $(elem).text(); sel = content.substring(start, end); } return sel; } }) </script> <script> function getPos(){ alert($("#edit").getSelectionStart()); } function getSelect(){ alert($("#edit").getSelection()); } function insert(){ $("#edit").insertString("hello"); } </script> </body> </html>