Textarea的自动缩进以及Tab缩进支持

切换背景色
主题: 字体: 切换行号 全选代码块(Ctrl+C复制) 半瓶墨水1年前贴出, JavaScript 语言
JavaScript代码: Textarea的自动缩进以及Tab缩进支持
01 //代码发芽网做好以后,很多人都提出贴代码的地方没有自动缩进
02 //一直都没有改,因为我觉得这里是贴代码的地方,不是写代码的地方
03 //最近研究jQuery,写了一个HTML测试页: http://www.fayaa.com/tool/try/
04 //为了使用上的方便,觉得确实使用代码缩进会比较方便
05 //
06 //现在发芽网的所有textarea都有自动缩进了,包括反馈页面
07 //   考虑到其他地方对Tab键的焦点切换用途,目前发芽网只在HTML测试页(fayaa.com/tool/try/)
08 //   截获了Tab按键,其他的textarea框不进行此配置
09 //
10 //下面的代码就是为了实现这个功能,原理很简单,采用上一行的缩进就行
11 //只要在html中插入脚本调用set_tab_indent_for_textareas()函数就可以了
12 //注1:需要jQuery支持,如果不喜欢jQuery改成裸javascript也很方便的
13 //BTW:浏览器的兼容性问题(firefox和IE)真他妈的烦!
14
15 /*------selection operations-------*/
16 function insertAtCursor(obj, txt) {
17   obj.focus();
18   //IE support
19   if (document.selection) {
20     sel = document.selection.createRange();
21     sel.text = txt;
22   }
23   //MOZILLA/NETSCAPE support
24   else {
25     var startPos = obj.selectionStart;
26     var scrollTop = obj.scrollTop;
27     var endPos = obj.selectionEnd;
28     obj.value = obj.value.substring(0, startPos) + txt + obj.value.substring(endPos, obj.value.length);
29     startPos += txt.length;
30     obj.setSelectionRange(startPos, startPos);
31     obj.scrollTop = scrollTop;
32   }
33 }
34 function getCaretPos(ctrl) {
35     var caretPos = 0;
36     if (document.selection) {
37     // IE Support
38     var range = document.selection.createRange();
39     // We'll use this as a 'dummy'
40     var stored_range = range.duplicate();
41     // Select all text
42     stored_range.moveToElementText( ctrl );
43     // Now move 'dummy' end point to end point of original range
44     stored_range.setEndPoint( 'EndToEnd', range );
45     // Now we can calculate start and end points
46     ctrl.selectionStart = stored_range.text.length - range.text.length;
47     ctrl.selectionEnd = ctrl.selectionStart + range.text.length;
48     caretPos = ctrl.selectionStart;
49     } else if (ctrl.selectionStart || ctrl.selectionStart == '0')
50     // Firefox support
51         caretPos = ctrl.selectionStart;
52     return (caretPos);
53 }
54
55 function getCurrentLineBlanks(obj) {
56   var pos = getCaretPos(obj);
57   var str = obj.value;
58   var i = pos-1;
59   while (i>=0) {
60     if (str.charAt(i) == '\n')
61       break;
62     i--;
63   }
64   i++;
65   var blanks = "";
66   while (i < str.length) {
67     var c = str.charAt(i);
68     if (c == ' ' || c == '\t')
69       blanks += c;
70     else
71       break;
72     i++;
73   }
74   return blanks;
75 }
76
77 function set_tab_indent_for_textareas() {
78   /* set all the tab indent for all the text areas */
79   $("textarea").each(function() {
80     $(this).keydown(function(eve){
81       if (eve.target != this) return;
82       if (eve.keyCode == 13)
83         last_blanks = getCurrentLineBlanks(this);
84       else if (eve.keyCode == 9) {
85         eve.preventDefault();
86         insertAtCursor(this, "  ");
87         this.returnValue = false;
88       }
89     }).keyup(function(eve){
90       if (eve.target == this && eve.keyCode == 13)
91           insertAtCursor(this, last_blanks);
92     });
93   });
94 }
返回正常查看模式 返回代码发芽网首页