代码
比这篇新的文章:
输入法的小键盘(软键盘)类
比这篇旧的文章: 实验一 Java集成开发环境设置与使用
作者: 半瓶墨水, 点击1775次, 评论(0), 收藏者(1), , 打分:
所有评论，共0条：( 我也来说两句)
比这篇旧的文章: 实验一 Java集成开发环境设置与使用
Textarea的自动缩进以及Tab缩进支持
语言: JavaScript, 标签: tab textarea 自动缩进 2008/10/18发布 1年前更新 更新记录作者: 半瓶墨水, 点击1775次, 评论(0), 收藏者(1), , 打分:
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 }
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 }
所有评论，共0条：( 我也来说两句)