2 ways to resolve focus control on a Web page--such as carriage return to move the cursor between the textbox (obtained from the web)

Source: Internet
Author: User
Tags array object contains reference reset string window
web| Solution | control | page

Methods 1:from listen to Tang. NET

Using client script to add the document's onkeydown event to the page, let the page perform the TAB function after receiving the carriage return event, that is, just change the event's KeyCode from 13 to 9

VBScript code:

<script language= "VBScript" >

Sub Document_onkeydown

If Event.keycode=13 Then

Event.keycode=9

End If

End Sub

</script>

The JavaScript code is as follows:

<script language= "javascript" for= "document" event= "onkeydown" >

<!--

if (event.keycode==13)

event.keycode=9;

-->

</script>

This way of handling, can realize the focus of moving down, but for the button also plays the same role, the general customer after entering the data, jump to the button, it is best to directly press "enter" to submit data. Therefore, the above method should be modified to the "submit" The button does not shift focus. Direct activation commits.

So I made a modification to the above code, that is, to determine the "source" of the event, is the Submit button, the code is as follows:

<script language= "javascript" for= "document" event= "onkeydown" >

<!--

if (event.keycode==13 && event.srcelement.type!= ' button ' && event.srcelement.type!= ' Submit ' & & event.srcelement.type!= ' reset ' && event.srcelement.type!= ' textarea ' && event.srcelement.type! ='')

event.keycode=9;

-->

</script>

Note: This method is really good, the experiment is successful

Method 2:

Around the problem we want to solve, here we will focus on document, Form, elements three objects, and onkeypress events, documents Document object: Refers to the documentation that describes the current window or the specified Window object. It contains the contents of the document from The following is the final implementation code list:
var jumptypearray =new Array ("text", "Password", "textarea", "checkbox", "Radio",
"Select", "Select-one", "Select-multiple", "file")//reference page to get the focus element type
var debartypearray =new Array ("Submit", "Reset", "button", "checkbox", "Radio",
"Select", "Select-one", "Select-multiple", "hidden")//reference page to exclude element types
function Instrarray (SRC,DEC)
{//check if the given string is in the specified string array, as in the return index number, or no return-1;
for (var i=0; i<dec.length; i++)
{
if (Src==dec[i])
{
Return i;//positioned successfully, returns index number
Break
}
}
return-1; Location failed, return-1
}
function CHECKCR (EVT)
{//Carriage return response function
var evt = (evt)? EVT: ((event) event:null);
var node = (evt.target)? Evt.target: ((evt.srcelement)? evt.srcElement:null);
var frm=document.forms[0]; Specifies that the form name is called the first in the page
if ((Evt.keycode =) && (Instrarray (Node.type,jumptypearray)!=-1))
{//To determine whether the current object is an input object, an array of object types: Jumptypearray
for (var i = 0; i < frm.elements.length; i++)
{//for begin
if (frm.elements[i].name==node.name)
{//Locate current Object
if ((i+1) < frm.elements.length)
{//Object array index offside judgment
if (Instrarray (Frm.elements[i+1].type,jumptypearray)!=-1)
{//To determine whether the next object of the current object is an input component, an array of object types: Jumptypearray
Frm.elements[i+1].focus ()//Set focus
if (Instrarray (Frm.elements[i+1].type,debartypearray) ==-1)
{//filter non-selected text object, object type array: Debartypearray
Frm.elements[i+1].select ()//Select component text content
}
}
Return false;//prohibit submission of form content
Break
}
Else
{//Submit form Content
return true;
Break
}
}
}//end for
}
}
document.onkeypress = CHECKCR;

Reference Description: Save the above code as a file, such as: Webenter.js, and then write in the page where you want to implement the carriage return line:
<script language= "JavaScript" src= "Path+webenter.js" ></script>.
Path: is the path where the Webenter.js file resides.

Note: This does not try, good luck



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.