Episode:
It is inconvenient to use the mouse and keyboard to log on to the Xicheng environmental protection project.
After entering username and password the day before yesterday, press enter to verify user logon. It can be used with the tab key of the keyboard for better results.
Today, the manager needs to use enter all the operations throughout the process. I found that Google, Yahoo, and Sina are not used for Baidu logon,
After all, this is not a habit. But when the manager sends a message, a grass-roots employee of mine will have to take care of it, unless I am the boss, O (others _ employees) O ~
Abstract:
I now take the common Web login page as an example to explain how the Enter key supports Tab key conversion and data submission.
The hypothetical homepage is login.htm, which contains controls such as <body>, <form>, and <input type = "*">.
The requirement is that the username on the logon page automatically obtains the focus, and then press enter to automatically move the focus to the password,
Finally, press enter to submit and verify user data logon.
Body code:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "X-UA-compatible" content = "Ie = emulateie8"/>
<Title> system logon </title>
<Link href = "CSS/login.css" rel = "stylesheet" type = "text/CSS"/>
<SCRIPT src = "JS/dialogjs/ymprompt. js" type = "text/JavaScript"> </SCRIPT>
<LINK rel = "stylesheet" id = 'skin' type = "text/CSS" href = "JS/dialogjs/skin/QQ/ymprompt.css"/>
<SCRIPT src = "JS/jquery-1.3.2.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT type = "text/JavaScript" Language = "JavaScript">
<! --
VaR JQ = jquery. noconflict ();
JQ (function (){
JQ ('# btncancel'). Click (function (){
JQ ("# myname"). Val ("");
JQ ("# mypsd"). Val ("");
});
JQ ('# btnlogin'). Click (function (){
VaR name = JQ ('# myname'). Val ();
VaR PSD = JQ ('# mypsd'). Val ();
If (name = '')
Ymprompt. Alert ('user name cannot be blank! ', Null, null, 'prompt information', null );
Else {
// Logon information
JQ. Ajax ({
Type: "Get ",
Data: {Username: name, userpsd: PSD },
URL: "tree. aspx? Mode = loginon ",
Datatype: "JSON ",
Cache: false,
Success: function (data ){
If (data. Success = "true "){
Location = "default. aspx ";
}
Else
Ymprompt. errorinfo ('the user name or password you entered is incorrect! ', Null, null, 'error information', null );
}
});
}
Ymprompt. Close ();
});
})
Function getenterfocus (){
Document. getelementbyid ("myname"). Focus ();
Document. getelementbyid ("myname"). Select ();
Document. getelementbyid ("myname"). onkeyup = getnextinput;
Document. getelementbyid ("mypsd"). onkeyup = getnextinput;
}
Function getnextinput (){
If (event. keycode = 13 ){
If (event. srcelement = Document. getelementbyid ("myname ")){
Document. getelementbyid ("mypsd"). Focus ();
Document. getelementbyid ("mypsd"). Select ();
}
If (event. srcelement = Document. getelementbyid ("mypsd ")){
Event. returnvalue = false;
Event. Cancel = true;
Document. getelementbyid ("btnlogin"). Click ();
Return false;
}
}
}
// Enter the account and password submitted
// Function document. onkeydown (){
// If (event. keycode = 13 ){
// Event. returnvalue = false;
// Event. Cancel = true;
// Document. getelementbyid ("btnlogin"). Click ();
// Return false;
//}
//}
-->
</SCRIPT>
</Head>
<Body onload = "javascript: getenterfocus ();">
<! -- Action = "login.htm" method = "Post" -->
<Form ID = "form1">
<Table width = "100%" Height = "254" border = "0" cellspacing = "0">
<Tr>
<TD Height = "21">
<Input type = "text" id = "myname" class = "dengluming"/>
</TD>
</Tr>
<Tr>
<TD Height = "21">
<Input type = "password" id = "mypsd" class = "dengluming"/>
</TD>
</Tr>
<Tr>
<TD Height = "49">
<Table border = "0" cellspacing = "0" style = "margin-left: 235px">
<Tr>
<TD>
<A href = "#" id = "btnlogin" class = "login_btn"> login </a>
</TD>
<TD>
<A href = "#" id = "btncancel" class = "login_btn"> cancel </a>
</TD>
</Tr>
</Table>
</TD>
</Tr>
</Table>
</Form>
</Body>
</Html>
[Thanks to goodsong ~ Don't make simple things n complicated to provide ideas]
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
