如题,就是CSDN回复的效果 就是比如我在回复框 写了“abc" 然后选中abc点击上面的B 就在abc前后加上B标签了,怎么写的呢?
------解决方案--------------------
- HTML code
<!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 if (textarea.createTextRange) { // IE sR = document.selection.createRange(); sR.text = text; sR.setEndPoint('StartToEnd', sR); sR.select(); } } } var tx=document.getElementById("test"), re=document.getElementById("result"), pos; document.getElementById("get").onclick = function(){ pos = cursorPosition.get(tx); re.innerHTML=("<strong>Range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>Text :</strong> " + (!pos.text ? '//--': pos.text)); } document.getElementById("set").onclick = function(){ cursorPosition.set(tx, pos); } document.getElementById("add").onclick = function(){ cursorPosition.add(tx, pos, input = prompt("你想插入替换的文本:","")); } </script> </body> </html>