Common JS functional tips for Web Development
--------------------------------------------------------------------------------
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">;
<HTML>;
<Head>;
<Title>; new document </title>;
</Head>;
<Body>;
<Form method = post action = "">;
<Input onpaste = "Return false;" type = "text" name = "textfield" style = "width: 400px; ime-mode: Disabled" value = "english only">;
</Form>;
</Body>;
</Html>;
-----------------------------------------------------------------------------
Only numbers can be entered
<Script language = "JavaScript">;
<! --
Function check ()
{
If (document. Form. Tell. value = ""){
Alert ("Please try again! ");
Document. Form. Tell. Focus ();
Return false;
}
Else {
VaR letters = "0123456789 () + -";
For (I = 0; I <document. Form. Tell. value. length; I ++ ){
VaR checkchar = Document. Form. Tell. value. charat (I );
If (letters. indexof (checkchar) =-1 ){
Alert ("the telephone fax format is incorrect! ");
Document. Form. Tell. Focus ();
Return false;
}
}
}
}
// -->;
</SCRIPT>;
The form between <body>;... </body>.
<Form method = "Post" name = form action = "" onsubmit = "Return check ();">;
<P align = "center">;
Enter the phone number: <input type = "text" name = "tell" size = "20">;
<Input type = "Submit" value = "Submit" name = "B1" >;</P>;
</Form>;
--------------------------------------------------------------------------------
Check the validity of email
Function check ()
{
If (document. Register. Email. value. length! = 0)
{
If (document. Register. Email. value. charat (0) = "." |
Document. Register. Email. value. charat (0) = "@" |
Document. Register. Email. value. indexof ('@', 0) =-1 |
Document. Register. Email. value. indexof ('.', 0) =-1 |
Document. Register. Email. value. lastindexof ("@")
= Document. Register. Email. value. Length-1 |
Document. Register. Email. value. lastindexof (".")
= Document. Register. Email. value. Length-1)
{
Alert ("the email format is incorrect! ");
Document. Register. Email. Focus ();
Return false;
}
}
Else
{
Alert ("email cannot be blank! ");
Document. Register. Email. Focus ();
Return false;
}
Return false;
}
-----------------------------------------------------------
Right-click the page to shield
<Body oncontextmenu = "Return false">;
----------------------------------------------------------------
Automatically clear spaces in the input box
<Head>;... <Script language = "JavaScript">;
<! --//
Function ignorespaces (string ){
VaR temp = "";
String = ''+ string;
Splitstring = string. Split (""); // there is a space between double quotation marks;
For (I = 0; I <splitstring. length; I ++)
Temp + = splitstring;
Return temp;
}
// -->;
</SCRIPT>;
Add the following code to the <body>; Area
<Form method = "Post" Action = "...">;
<Input type = text size = 25 onblur = "This. value = ignorespaces (this. Value);" name = "text">;
<Input type = submit value = "OK" name = "button">;
</Form>;
-----------------------------------------------------------------------
Context Menu fade-in and fade-out
<HTML >;< head >;< title >;right-click the fade-in and fade-out effect of the menu </title>;
<Meta content = "text/html; charset = gb2312" http-equiv = Content-Type>;
<Script language = JavaScript>;
<! -- // Rightclickmenu
VaR intdelay = 10; // set the menu display speed.
VaR intinterval = 5; // the transparency of each change
Function showmenuie5 (){
VaR rightedge = Document. Body. clientWidth-event.clientX
VaR BottomEdge = Document. Body. clientHeight-event.clientY
If (rightedge <ie5menu. offsetwidth)
Ie5menu. style. Left = Document. Body. scrollleft + event. clientX-ie5menu.offsetWidth
Else
Ie5menu. style. Left = Document. Body. scrollleft + event. clientx
If (BottomEdge <ie5menu. offsetheight)
Ie5menu. style. Top = Document. Body. scrolltop + events. clientY-ie5menu.offsetHeight
Else
Ie5menu. style. Top = Document. Body. scrolltop + event. clienty
Ie5menu. style. Visibility = "visible"
// Ie5menu. style. Visibility = ""
Ie5menu. Filters. Alpha. Opacity = 0
Gradientshow ()
Return false
}
Function hidemenuie5 (){
// Ie5menu. style. Visibility = "hidden"
Gradientclose ()
}
Function highlightie5 (){
If (event. srcelement. classname = "menuitems "){
Event. srcelement. style. backgroundcolor = "highlight"
Event. srcelement. style. color = "white"
}
}
Function lowlightie5 (){
If (event. srcelement. classname = "menuitems "){
Event. srcelement. style. backgroundcolor = ""
Event. srcelement. style. color = "#000000"
}
}
Function jumptoie5 (){
If (event. srcelement. classname = "menuitems "){
If (event. srcelement. url! = ''){
If (event. srcelement. getattribute ("target ")! = NULL)
Window. Open (event. srcelement. url, event. srcelement. getattribute ("target "))
Else
Window. Location = event. srcelement. url
}
}
}
Function gradientshow () // implements the fade-in Function
{
Ie5menu. Filters. Alpha. Opacity + = intinterval
If (ie5menu. Filters. Alpha. Opacity <100) setTimeout ("gradientshow ()", intdelay)
}
Function gradientclose () // implement the fade-out function
{
Ie5menu. Filters. Alpha. Opacity-= intinterval
If (ie5menu. Filters. Alpha. Opacity>; 0 ){
SetTimeout ("gradientclose ()", intdelay)
}
Else {
Ie5menu. style. Visibility = "hidden"
}
}
Function changebg () // change the background color of the menu item. The two color values can be changed to the one you need.
{
OEL = event. srcelement
If (OEL. style. Background! = "Navy "){
OEL. style. Background = "Navy"
}
Else {
OEL. style. Background = "# cccccc"
}
}
// -->;
</SCRIPT>;
<Style type = text/CSS>;
. Cmenu {
Filter: alpha (opacity = 0); background-color: # d6d3ce; border-bottom: #666666 2px solid; border-left: # e4e4e4 2px solid; border-right: #666666 2px solid; border-top: # e4e4e4 2px solid; color: #000000; cursor: default; font-size: 9pt; color: #000000; font-weight: normal; line-Height: 20px; position: absolute; visibility: hidden; width: 110px
}
. Menuitems {
Font-size: 9pt;
Margin: 2px;
Padding-bottom: 0px;
Padding-left: 15px;
Padding-Right: 3px;
Padding-top: 0px;
}
</Style>;
<Meta content = "Microsoft FrontPage 4.0" name = generator>;
</Head>;
<Body>;
<Object classid = CLSID: 8856f961-340a-11d0-a96b-00c04fd705a2 Height = 0 id = webbrowser width = 0>;
</Object>;
<Rightclick>; <! -- [If IE]>;
<Div class = cmenu id = ie5menu onclick = jumptoie5 () onmouseout = lowlightie5 ()
Onmouseover = highlightie5 ()>;
<Div class = menuitems url = "javascript: click_obj (0)">; Backward </div>;
<Div class = menuitems url = "javascript: click_obj (1)">; Forward </div>;
<Div class = menuhr >;< HR style = "width: 100%" >;</div>;
<Div class = menuitems url = "javascript: click_obj (2)">; refresh </div>;
<Div class = menuitems url = "javascript: click_obj (3)">; add to favorites </div>;
<Div class = menuitems url = "javascript: click_obj (4)">; view the source file </div>;
<Div class = menuhr >;< HR style = "width: 100%" >;</div>;
<Div class = menuitems url = "javascript: click_obj (5)">; Attribute </div>;
</Div>;
<! [Endif] -->;
<Script language = JavaScript>;
<! --
Function click_obj (ID ){
Switch (ID ){
Case 0:
History. Back ()
Break
Case 1:
History. Forward ()
Break
Case 2:
Window. Location. Reload ()
Break
Case 3:
Window. External. AddFavorite (location. href, document. Title)
Break
Case 4:
Window. Location = "view-source:" + window. Location. href
Break
Case 5:
Document. All. webbrowser. execwb (10, 1)
Break
}
}
If (document. All & window. Print ){
Ie5menu. classname = "cmenu"
Document. oncontextmenu = showmenuie5
Document. Body. onclick = hidemenuie5
}
// -->;
</SCRIPT>;
</Rightclick>;
</Body>;
----------------------------------------------------------------------------
I have not checked the version for printing by using ActiveX in IE. IE6 is normal.
<Head>;... <Script language = JavaScript>;
<! --
Function setprint ()
{
WB. execwb (8, 1 );
}
Function previewprint ()
{
WB. execwb (7,1)
}
// -->;
</SCRIPT>;
Add:
<Object classid = CLSID: 8856f961-340a-11d0-a96b-00c04fd705a2 Height = 0 id = WB width = 0>;
</Object>;
<Input type = "button" value = "set" id = button1 name = button1 onclick = "setprint ();">;
<Input type = "button" value = "preview" id = button2 name = button2 onclick = "previewprint ();">;
----------------------------------------------------------------
Hyperlink submission form
<Script language = "JavaScript">;
Function checkvalue ()
{
If (document. welcomeform. Nickname. value = "")
{
Alert ("the nickname cannot be blank! ");
Return (false );
}
If (document. welcomeform. Password. value = "")
{
Alert ("the password cannot be blank! ");
Return (false );
}
Document. welcomeform. Submit ();
Return (true );
}
</SCRIPT>;
Add the following code between <body>;... </body>:
<Form name = "welcomeform" method = "Post" Action = "Welcome. asp">;
<A href = "#" onclick = "javascript: checkvalue (); Return false:" >; logon </a>;
</Form>;
----------------------------------------------------------
Page caching not allowed
You can use the methods provided by Java in JSP or servlet.
<%
Response. setheader ("Pragma", "No-Cache ");
Response. setheader ("cache-control", "No-Cache ");
Response. setdateheader ("expires", 0 );
%>;
----------------------------------------
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
