日期:2014-05-16 浏览次数:20385 次
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo : Textarea 元素的光标位置</title> <style> #result { font-size:18px; line-height:25px; padding-left:20px; } </style> </head> <body> <h1>Textarea 元素的光标位置</h1> <ul> <li>获取 Textarea 元素当前的光标位置</li> <li>设置回原先的 Textarea 元素的光标位置</li> <li>在 Textarea 元素的光标位置插入文本</li> </ul> <form action="#"> <textarea id="test" rows="8" cols="50"></textarea> <p> <input type="button" id="get" value="Get Cursor Position"/> <input type="button" id="set" value="Set Cursor Position"/> <input type="button" id="add" value="Add Text After Cursor Position"/> </p> </form> <h2>Textarea Range:</h2> <div id="result"></div> <script type="text/javascript"> var cursorPosition = { get: function (textarea) { var rangeData = {text: "", start: 0, end: 0 }; if (textarea.setSelectionRange) { // W3C textarea.focus(); rangeData.start= textarea.selectionStart; rangeData.end = textarea.selectionEnd; rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): ""; } else if (document.selection) { // IE textarea.focus(); var i, oS = document.selection.createRange(), oR = document.body.createTextRange(); oR.moveToElementText(textarea); rangeData.text = oS.text; rangeData.bookmark = oS.getBookmark(); for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) { if (textarea.value.charAt(i) == '\r' ) { i ++; } } rangeData.start = i; rangeData.end = rangeData.text.length + rangeData.start; } return rangeData; }, set: function (textarea, rangeData) { var oR, start, end; if(!rangeData) { alert("You must get cursor position first.") } textarea.focus(); if (textarea.setSelectionRange) { // W3C textarea.setSelectionRange(rangeData.start, rangeData.end); } else if (textarea.createTextRange) { // IE oR = textarea.createTextRange(); if(textarea.value.length === rangeData.start) { oR.collapse(false); oR.select(); } else { oR.moveToBookmark(rangeData.bookmark); oR.select(); } } }, add: function (textarea, rangeData, text) { var oValue, nValue, oR, sR, nStart, nEnd, st; this.set(textarea, rangeData); if (textarea.setSelectionRange) { // W3C oValue = textarea.value; nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end); nStart = nEnd = rangeData.start + text.length; st = textarea.scrollTop; textarea.value = nValue; if(textarea.scrollTop != st) { textarea.scrollTop = st; } textarea.setSelectionRange(nStart, nEnd); } else i