JavaScript为文本框内选中文字添加标签
使用以下原创代码请遵循
协议.
Default.aspx
1 <%@ Page Language="C#" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head id="Head1" runat="server">
7 <title></title>
8 <script type="text/javascript">
9 var start = 0;
10 var end = 0;
11
12 function add() {
13 var textBox = document.getElementById("inputtext");
14 var pre = textBox.value.substr(0, start);
15 var text = textBox.value.substr(start, end - start);
16 var post = textBox.value.substr(end);
17
18 if (text != "") {
19 textBox.value = pre + "<h1>" + text + "</h1>" + post;
20 }
21 }
22
23 function remove() {
24 var z = 0;
25 var textBox = document.getElementById("inputtext");
26
27 var pre = textBox.value.substr(0, start);
28 var _sh1 = pre.lastIndexOf("<h1>");
29
30 if (_sh1 != -1) {
31 if (pre.lastIndexOf("</h1>") < _sh1) {
32 z++;
33 }
34 }
35
36 var text = textBox.value.substr(start, end - start);
37
38 var post = textBox.value.substr(end);
39 var _eh1 = post.indexOf("</h1>");
40
41 if (_eh1 != -1) {
42 if (post.indexOf("<h1>") > _eh1 || post.indexOf("<h1>") == -1) {
43 z++;
44 }
45 }
46
47 if (z == 2) {
48 pre = pre.substr(0, _sh1) + pre.substr(_sh1 + 4);
49 post = post.substr(0, _eh1) + post.substr(_eh1 + 5);
50 }
51
52 textBox.value = pre + text + post;
53 }
54
55 function savePos(textBox) {
56 //FF
57 if (typeof (textBox.selectionStart) == "number") {
58 start = textBox.selectionStart;
59 end = textBox.selectionEnd;
60 }
61 //IE
62 else if (document.selection) {
63 var range = document.selection.createRange();
64 if (range.parentElement().id == textBox.id) {
65 var range_all = document.body.createTextRange();
66 range_all.moveToElementText(textBox);
67
68 for (start = 0; range_all.compareEndPoints("StartToStart", range) < 0; start++) {
69 range_all.moveStart('character', 1);
70 }
71
72 for (var i = 0; i <= start; i++) {
73 if (textBox.value.charAt(i) == '\n')
74 start++;
75 }
76
77 var range_all = document.body.createTextRange();
78 range_all.moveToElementText(textBox);
79
80 for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end++) {
81 range_all.moveStart('character', 1);
82 }
83
84 for (var i = 0; i <= end; i++) {
85 if (textBox.value.charAt(i) == '\n')
86 end++;
87 }
88 }
89 }
90
91 document.getElementById("start").value = start;
92 document.getElementById("end").value = end;
93 }
94 </script>
95
96 </head>
97 <body>
98 <form id="form1" runat="server">
99 <table border="1" cellspacing="0" cellpadding="0">
100 <tr>
101 <td>
102 start:
103 <input type="text" id="start" size="3" />
104 </td>
105 <td>
106 end:
107 <input type="text" id="end" size="3" />
108 </td>
109 </tr>
110 <tr>
111 <td colspan="2">
112 <textarea id="inputtext"
113 onkeydown="savePos(this)"
114 onkeyup="savePos(this)"
115 onmousedown="savePos(this)"
116 onmouseup="savePos(this)"
117 onfocus="savePos(this)"
118 rows="14" cols="50">1234567890</textarea>
119 </td>
120 </tr>
121 <tr>
122 <td>
123 <input type="button" onclick="add()" value="Add h1" />
124 </td>
125 <td>
126 <input type="button" onclick="remove()" value="Remove h1" />
127 </td>
128 </tr>
129 </table>
130 </form>
131 </body>
132 </html>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head id="Head1" runat="server">
7 <title></title>
8 <script type="text/javascript">
9 var start = 0;
10 var end = 0;
11
12 function add() {
13 var textBox = document.getElementById("inputtext");
14 var pre = textBox.value.substr(0, start);
15 var text = textBox.value.substr(start, end - start);
16 var post = textBox.value.substr(end);
17
18 if (text != "") {
19 textBox.value = pre + "<h1>" + text + "</h1>" + post;
20 }
21 }
22
23 function remove() {
24 var z = 0;
25 var textBox = document.getElementById("inputtext");
26
27 var pre = textBox.value.substr(0, start);
28 var _sh1 = pre.lastIndexOf("<h1>");
29
30 if (_sh1 != -1) {
31 if (pre.lastIndexOf("</h1>") < _sh1) {
32 z++;
33 }
34 }
35
36 var text = textBox.value.substr(start, end - start);
37
38 var post = textBox.value.substr(end);
39 var _eh1 = post.indexOf("</h1>");
40
41 if (_eh1 != -1) {
42 if (post.indexOf("<h1>") > _eh1 || post.indexOf("<h1>") == -1) {
43 z++;
44 }
45 }
46
47 if (z == 2) {
48 pre = pre.substr(0, _sh1) + pre.substr(_sh1 + 4);
49 post = post.substr(0, _eh1) + post.substr(_eh1 + 5);
50 }
51
52 textBox.value = pre + text + post;
53 }
54
55 function savePos(textBox) {
56 //FF
57 if (typeof (textBox.selectionStart) == "number") {
58 start = textBox.selectionStart;
59 end = textBox.selectionEnd;
60 }
61 //IE
62 else if (document.selection) {
63 var range = document.selection.createRange();
64 if (range.parentElement().id == textBox.id) {
65 var range_all = document.body.createTextRange();
66 range_all.moveToElementText(textBox);
67
68 for (start = 0; range_all.compareEndPoints("StartToStart", range) < 0; start++) {
69 range_all.moveStart('character', 1);
70 }
71
72 for (var i = 0; i <= start; i++) {
73 if (textBox.value.charAt(i) == '\n')
74 start++;
75 }
76
77 var range_all = document.body.createTextRange();
78 range_all.moveToElementText(textBox);
79
80 for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end++) {
81 range_all.moveStart('character', 1);
82 }
83
84 for (var i = 0; i <= end; i++) {
85 if (textBox.value.charAt(i) == '\n')
86 end++;
87 }
88 }
89 }
90
91 document.getElementById("start").value = start;
92 document.getElementById("end").value = end;
93 }
94 </script>
95
96 </head>
97 <body>
98 <form id="form1" runat="server">
99 <table border="1" cellspacing="0" cellpadding="0">
100 <tr>
101 <td>
102 start:
103 <input type="text" id="start" size="3" />
104 </td>
105 <td>
106 end:
107 <input type="text" id="end" size="3" />
108 </td>
109 </tr>
110 <tr>
111 <td colspan="2">
112 <textarea id="inputtext"
113 onkeydown="savePos(this)"
114 onkeyup="savePos(this)"
115 onmousedown="savePos(this)"
116 onmouseup="savePos(this)"
117 onfocus="savePos(this)"
118 rows="14" cols="50">1234567890</textarea>
119 </td>
120 </tr>
121 <tr>
122 <td>
123 <input type="button" onclick="add()" value="Add h1" />
124 </td>
125 <td>
126 <input type="button" onclick="remove()" value="Remove h1" />
127 </td>
128 </tr>
129 </table>
130 </form>
131 </body>
132 </html>
