夏日博客

A-A+

javascript下获取textarea的光标位置，并插入数据

2016年01月14日 前端设计 暂无评论 阅读 4 views 次

获取textarea的光标位置，并插入数据有需要的同学可参考本实例,把下面代码保存成 js文件,或在html页面中加入到之间哦,代码如下:

  1. var start=0;  
  2. var end=0;  
  3. function add(){  
  4. var textBox = document.getElementById("ta");  
  5. var pre = textBox.value.substr(0, start);  
  6. var post = textBox.value.substr(end);  
  7. textBox.value = pre + document.getElementById("inputtext").value + post;  
  8. }  
  9. function savePos(textBox){  
  10. //如果是Firefox(1.5)的话，方法很简单  
  11. if(typeof(textBox.selectionStart) == "number"){  
  12. start = textBox.selectionStart;  
  13. end = textBox.selectionEnd;  
  14. }  
  15. //下面是IE(6.0)的方法，麻烦得很，还要计算上'n'  
  16. else if(document.selection){  
  17. var range = document.selection.createRange();  
  18. if(range.parentElement().id == textBox.id){  
  19. // create a selection of the whole textarea  
  20. var range_all = document.body.createTextRange();  
  21. range_all.moveToElementText(textBox);  
  22. //两个range，一个是已经选择的text(range)，一个是整个textarea(range_all)  
  23. //range_all.compareEndPoints()比较两个端点，如果range_all比range更往左(further to the left)，则 //返回小于0的值，则range_all往右移一点，直到两个range的start相同。  
  24. // calculate selection start point by moving beginning of range_all to beginning of range  
  25. for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)  
  26. range_all.moveStart('character', 1);  
  27. // get number of line breaks from textarea start to selection start and add them to start  
  28. // 计算一下n  
  29. for (var i = 0; i <= start; i ++){  
  30. if (textBox.value.charAt(i) == 'n')  
  31. start++;  
  32. }  
  33. // create a selection of the whole textarea  
  34. var range_all = document.body.createTextRange();  
  35. range_all.moveToElementText(textBox);  
  36. // calculate selection end point by moving beginning of range_all to end of range  
  37. for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)  
  38. range_all.moveStart('character', 1);  
  39. // get number of line breaks from textarea start to selection end and add them to end  
  40. for (var i = 0; i <= end; i ++){  
  41. if (textBox.value.charAt(i) == 'n')  
  42. end ++;  
  43. }  
  44. }  
  45. }  
  46. document.getElementById("start").value = start;  
  47. document.getElementById("end").value = end;  
  48. }  

html代码如下:

  1. <form action="a.cgi">  
  2. <table border="1" cellspacing="0" cellpadding="0">  
  3. <tr>  
  4. <td>start: <input type="text" id="start" size="3"/></td>  
  5. <td>end: <input type="text" id="end" size="3"/></td>  
  6. </tr>  
  7. <tr>  
  8. <td colspan="2">  
  9. <textarea id="ta" onKeydown="savePos(this)" onKeyup="savePos(this)" onmousedown="savePos(this)" onmouseup="savePos(this)"  
  10. onfocus="savePos(this)" rows="14" cols="50"></textarea>  
  11. </td>  
  12. </tr>  
  13. <tr>  
  14. <td><input type="text" id="inputtext" /></td>  
  15. <td><input type="button" onClick="add()" value="Add Text"/></td>  
  16. </tr>  
  17. </table>  
  18. </form>  
标签：

给我留言