Web编程中常用的Javascript代码
JS代码在Web编程中会经常用到，且功能强大。以下是我在工作中常常用的JS代码，总结如下：! E2 i, u7 {9 l& |9 ?8 O5 l
' [/ U% }) `1 ] W1、触发事件提交表单% |6 N" l7 u d$ {2 s
" `3 O$ b/ p8 W3 h
示例1：
( G* D/ @* [, q' |
+ O4 {- G& |8 d<script language="javascript">% y& F- d- k5 W: e3 m
function TJsub() {6 q c4 i) c) S
if(confirm('您确定要提交本表单吗？'))
( p- e1 l {! }% q9 D* w8 @ return document.form1.action ="test.php?action=set";
" J; Q- S4 W6 H% e* M: p( Efrm1.submit();3 g: B* Z. |' k, ~
else return false;
4 o: b# b& z2 L: {}
4 c# _7 _% _* g' V2 x0 U</script>4 P' J; @+ m5 P h0 a& b$ G! v4 I
0 w- ]6 ^7 D( ^6 o: _3 \<form name="form1" method="post">4 m0 a" F' l- _2 p; C& C! v& {
<input type="text" name="text1" value="测试文字1">6 h6 E: ^: L7 Q9 U! c$ C" r
<input type="text" name="text2" value="测试文字2" onClick="TJsub()>0 ~' W- d1 U* t- b' ~
<input type="submit" name="submit1" value="提 交"">" m# W7 Y. Y& A% @% |
</form>
5 }) \1 I" o8 W9 M2 m3 O
) f6 u# k! j0 A. T2 ]. @5 g2、onchange与onclick的事件触发
u, U0 X) r! K2 o$ s6 m; y( l) c! T( g( C
onchange大多用在下拉列表的触发事件中，重点在“改变”即触发事件。如页面的跳转等。而onclick强调“点击”，即点击即触发事件，用途广泛。& M# x* _* D( I0 i1 _0 U. m
1 U/ X$ j9 c" t
用法比较简单，就不做示例了。4 P) F& r1 L/ l8 o7 U
3 t" A$ R7 i& e5 r0 ~
3、“onblur”当焦点离开文本控件时，触发动作。它常常于自动获得焦点一起使用
5 x; W- f& {% U9 ~( S
( F5 C( I% v, H4、自动获得焦点5 G4 F3 t1 \1 j
' Y) N/ t1 k: v- ^3 G
示例4：0 S# ? N- V/ D2 X! Z# l% r4 K
* {) I h3 P( X
<body bgcolor="#FFFFFF" onload="document.form1.text2.focus()"># A V8 g+ { ^$ _
<form name="form1" method="post">
% r* u. e) b* g7 p$ `* i <input type="text" name="text1" value="测试文字1">
, T# s0 m/ M/ z" b& N6 h <input type="text" name="text2" value="测试文字2" onClick="TJsub()>9 `9 `; x$ y8 `4 t
<input type="submit" name="submit1" value="提 交"">
6 V7 Q1 R% |$ K* W+ _0 |</form>0 b( i ^9 M+ g4 h
</body>
! C9 g* ?: @4 v2 o/ N) m! a& Q3 Q H9 D+ b2 e, j& E Q" c2 J
5、回车移动焦点（onkeydown="if(event.KeyCode == 13)event.KeyCode=9"）! S1 B; c5 ?8 l# p
$ M; K- t3 h" u6 k3 r示例5：2 X, U [/ h3 H9 _* B1 a( u
" u3 s- h" D: x7 T& p' \/ x$ ]
<form name="form1" method="post">5 L3 t8 z9 Z, b% u F8 s- W ~
<input type="text" name="text1" value="测试文字1" onkeydown="if(event.KeyCode == 13)event.KeyCode=9">7 w; d# B g* M1 S5 \0 T
<input type="text" name="text2" value="测试文字2" onkeydown="if(event.KeyCode == 13)event.KeyCode=9">
8 ]1 V" [3 U) \3 z1 i( L <input type="submit" name="submit1" value="提 交"">
9 g& x, w0 x0 b. T2 X</form>
) U: e. }& z3 y0 q1 M! }4 ?$ e, T0 J# k3 b! _7 V% a u
6、锁定文本框（readonly）
" z P' _! R5 ?5 N! ] _
' a7 ^$ P7 W( i示例6：- {9 a8 U6 d9 b! z X9 W
: [" O4 N; A3 |% T* l& ?7 O) m<form name="form1" method="post">% N& Y, ^; ^1 m# `! c J& b
<input type="text" name="text1" value="测试文字1" readonly>- F& M2 @; o& \" `' t) w/ a" q
<input type="text" name="text2" value="测试文字2" readonly>
5 ]; \8 ^% g* T <input type="submit" name="submit1" value="提 交"">% u$ G0 t8 R3 i7 R& x, h
</form>
5 t( N/ w1 x5 C7 r( {. h6 ?
7 q- g' y* G+ ^7、文本框中自动将小写字母转换大写
3 a# C0 ?/ c- _$ M; }. [; x: u( k" S; V$ H0 z" x$ b }( l- [+ d
示例7：, n2 F0 Y4 D* d/ |+ s
) x p0 X- }! y3 C: @/ N/ G<form name="form1" method="post">
4 D+ L4 {/ C& q2 X+ g9 M <input type="text" name="text1" value="sample" style="font-variant:Small-caps" >5 I+ j G4 }7 ^( b% p9 }7 a9 q
<input type="text" name="text2" style="font-variant:Small-caps" >, X& d; a2 z* Y6 i
<input type="submit" name="submit1" value="提 交"">
6 {& P% c( z6 n4 f) H- E</form>0 c" t2 E, i+ O( l. |+ R
- r- s( X/ w6 Y7 M1 d
8、当脚本将焦点定位到一个文本框后，怎么将光标定位文本框里字符串未尾
9 x) K3 o& W' J6 b
( F3 N; x# `% g, a8 q" Z示例8：
. t/ O/ G/ J1 `5 b4 }$ n b, w( s: x8 o
<SCRIPT>
3 P1 _+ V9 L8 C9 d* @& Afunction setCaretAtEnd (field) { ) o1 L3 F# \1 M' ^
if (field.createTextRange) { 0 R9 A# ~2 E2 e q5 I/ @5 w8 r
var r = field.createTextRange(); 2 G; o, r5 V \' Q7 v& ` j: D
r.moveStart('character', field.value.length);
+ v2 p4 b# I. X7 S' k r.collapse();
. Y1 \0 C1 {5 b' X: X* V: T r.select(); $ X2 q' o; h- i/ c) O) |1 e
} ' \0 c) c! `7 ~0 o+ Q7 e0 F+ m
}
2 h) D& d/ P# k2 O. t$ I</SCRIPT>
7 R. ^+ F9 P9 Q<FORM NAME="aForm"> / X0 U! u7 s8 W& G$ K4 {. g
<INPUT TYPE="text" NAME="userName" VALUE="測試文字" ONFOCUS="setCaretAtEnd(this)" >
6 q9 n E# p: ~* N" R. n: n( `<INPUT TYPE="text" NAME="userAge" VALUE="測試文字" ONFOCUS="setCaretAtEnd(this)" > & `* w! }9 [. D! F6 [
</FORM>
