<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>js操作textarea方法集合</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <style type="text/css"> #testlujun { width: 348px; height: 80px; border: #ddd 1px solid; background: #fafafa; padding: 5px 10px; outline: none; resize: none; } </style> <body> <textarea id="testlujun">abcdefghijklmnopqrstuvwxyz</textarea> <br> <input onclick="alert(TT.getCursorPosition(test))" type="button" value="光标位置"> <input onclick="TT.setCursorPosition(test,3)" type="button" value="设置光标到第3位置"> <input onclick="TT.add(test,‘你好‘)" type="button" value="添加‘你好‘到光标后面"> <input onclick="TT.del(test,2)" type="button" value="删除光标前2个字符"> <input onclick="TT.del(test,-2)" type="button" value="删除光标后2个字符"> <input onclick="TT.sel(test,0,2)" type="button" value="选中字符0-2的位置"> <input onclick="TT.selString(test,‘mno‘)" type="button" value="选中字符‘mno‘的位置"> </body> <script type="text/javascript"> // <![CDATA[ var test = document.getElementById(‘testlujun‘); var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ getCursorPosition: function(t) { if (document.selection) { t.focus(); var ds = document.selection; var range = ds.createRange(); var stored_range = range.duplicate(); stored_range.moveToElementText(t); stored_range.setEndPoint("EndToEnd", range); t.selectionStart = stored_range.text.length - range.text.length; t.selectionEnd = t.selectionStart + range.text.length; return t.selectionStart; } else { return t.selectionStart; } }, /* * 设置光标位置 * @Method setCursorPosition * @param t element * @param p number * @return */ setCursorPosition: function(t, p) { this.sel(t, p, p); }, /* * 插入到光标后面 * @Method add * @param t element * @param txt String * @return */ add: function(t, txt) { var val = t.value; if (document.selection) { t.focus(); document.selection.createRange().text = txt; } else { var cp = t.selectionStart; var ubbLength = t.value.length; var s = t.scrollTop; // document.getElementById(‘aaa‘).innerHTML += s + ‘<br />‘; t.value = t.value.slice(0, t.selectionStart) + txt + t.value.slice(t.selectionStart, ubbLength); this.setCursorPosition(t, cp + txt.length); // document.getElementById(‘aaa‘).innerHTML += t.scrollTop + ‘<br />‘; firefox = navigator.userAgent.toLowerCase().match(/firefox\/([\d\.]+)/) && setTimeout(function() { if (t.scrollTop != s) t.scrollTop = s; }, 0) }; }, /* * 删除光标 前面或者后面的 n 个字符 * @Method del * @param t element * @param n number n>0 后面 n<0 前面 * @return * 重新设置 value 的时候 scrollTop 的值会被清0 */ del: function(t, n) { var p = this.getCursorPosition(t); var s = t.scrollTop; var val = t.value; t.value = n > 0 ? val.slice(0, p - n) + val.slice(p) : val.slice(0, p) + val.slice(p - n); this.setCursorPosition(t, p - (n < 0 ? 0 : n)); firefox = navigator.userAgent.toLowerCase().match(/firefox\/([\d\.]+)/) && setTimeout(function() { if (t.scrollTop != s) t.scrollTop = s; }, 10) }, /* * 选中 s 到 z 位置的文字 * @Method sel * @param t element * @param s number * @param z number * @return */ sel: function(t, s, z) { if (document.selection) { var range = t.createTextRange(); range.moveEnd(‘character‘, -t.value.length); range.moveEnd(‘character‘, z); range.moveStart(‘character‘, s); range.select(); } else { t.setSelectionRange(s, z); t.focus(); } }, /* * 选中一个字符串 * @Method sel * @param t element * @param s String * @return */ selString: function(t, s) { var index = t.value.indexOf(s); index != -1 ? this.sel(t, index, index + s.length) : false; } } // ]]> </script> </html>
整理自《封装js操作textarea 方法集合(兼容很好)》