Home > Developer > JavaScript
Click the input box to display the selection information in the form using javaScript.
This article provides a detailed introduction to the example of using javaScript to select information in the pop-up window of the click input box. If you need it, you can refer to it for help.
The source code is provided here. style processing is not performed, but the function is acceptable. I hope you can communicate with me!
The Code is as follows:
<Html>
<Head>
<Title> click the displayed DIV selection Information </title>
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
</Head>
<Body>
<Input type = "text" onfocus = "alertDivINFO (this, 'id', 'name', true, true, 600,300, 'arrs ')"/>
<Div style = "position: absolute;"> </div>
</Body>
</Html>
<Script type = "text/javascript">
// Array information
Var arrs = new Array ();
Arrs. push ({id: "1", name: "Zhang San 3 "});
Arrs. push ({id: "2", name: "4 3 "});
Arrs. push ({id: "3", name: "Shen Wu 3 "});
Arrs. push ({id: "4", name: "weekly 3 "});
Arrs. push ({id: "5", name: "Xiao 3 "});
Arrs. push ({id: "6", name: "Wang Wu "});
Arrs. push ({id: "7", name: "baodian 3 "});
/**
* Obj: Click the object in the text box.
* IdStr: id key name of the json Array
* NameStr: name key of the json Array
* Bool: true: append false: re-assign value
* BoolSet: true: the values of ID and Name are both false: only the value of Name is displayed.
* WidthNum: the width of the Information DIV.
* HeightNum: the height of the Information DIV
* ArrName: array name
*/
Function alertDivINFO (obj, idStr, nameStr, bool, boolSet, widthNum, heightNum, arrName ){
Obj. blur ();
If (! WidthNum ){
WidthNum = 600;
}
If (! HeightNum ){
Heightnum= 350;
}
// Create a large DIV
Var alertDivParent = document. createElement ("div ");
AlertDivParent. id = "alertDivParent ";
With (alertDivParent. style ){
Top = 0;
Left = 0;
Position = "absolute ";
Background = "# EEEEEE ";
Filter = "alpha (opacity = 70 )";
Opacity = 0.7;
Width = Math. max (document. body. clientWidth, document. body. scrollWidth );
Height = Math. max (document. body. clientHeight, document. body. scrollHeight );
}
Document. body. appendChild (alertDivParent );
// Create a small DIV
Var alertDiv = document. createElement ("div ");
AlertDiv. id = "alertDiv ";
With (alertDiv. style ){
Width = widthNum;
Height = heightNum;
Position = "absolute ";
Background = "# DDDDDD ";
Left = (Math. max (document. body. clientWidth, document. body. scrollWidth)-widthNum)/2;
Top = (Math. max (document. body. clientHeight, document. body. scrollHeight)-heightNum)/2;
}
// Add to form
Document. body. appendChild (alertDiv );
// Create a DIV for search
Var alertQueryDiv = document. createElement ("div ");
AlertQueryDiv. id = "alertQueryDiv ";
// Add the DIV to the Information DIV
AlertDiv. appendChild (alertQueryDiv );
AlertQueryDiv. innerHTML = "Search name :";
// Create a text box
Var alertQueryINPUT = document. createElement ("input ");
AlertQueryINPUT. id = "alertQueryINPUT ";
AlertQueryINPUT. type = "text ";
// Add the text box to the Search DIV
AlertQueryDiv. appendChild (alertQueryINPUT );
// Create Search button
Var alertQueryBUTTON = document. createElement ("input ");
AlertQueryBUTTON. id = "alertQueryBUTTON ";
AlertQueryBUTTON. type = "button ";
AlertQueryBUTTON. value = "Search ";
// Add an event to the button
AlertQueryBUTTON. onclick = function (){
// Calculates the number of cells that can be placed in the specified width.
Var tdWidthNum = 130;
Var tdNum = parseInt (widthNum/tdWidthNum );
Var num = 0;
Var j = 0;
// Obtain the displayed Table
Var alertInfoTab = document. getElementById ("alertInfoTab ");
// Clear THead Information
AlertInfoTab. deleteTHead ();
// Loop Array
For (var I = 0; I <eval (arrName). length; I ++ ){
// If it is equal to the value in the array, it is added to the TABLE.
If (eval (arrName + "[I]." + nameStr). indexOf (alertQueryINPUT. value)> = 0 ){
Var header;
If (j % tdNum = 0 ){
Header = alertInfoTab. createTHead ();
Header = header. insertRow (num );
Num ++;
}
J ++;
Var headerName = header. insertCell (-1 );
With (headerName. style ){
Width = tdWidthNum;
Color = "blue ";
Cursor = "pointer ";
}
If (boolSet)
HeaderName. appendChild (document. createTextNode (eval (arrName + "[I]. "+ idStr) +": "+ eval (arrName +" [I]. "+ nameStr )));
Else if (! BoolSet)
HeaderName. appendChild (document. createTextNode (eval (arrName + "[I]." + nameStr )));
HeaderName. onclick = function (){
If (bool)
Obj. value = obj. value + this. innerHTML + ";";
Else if (! Bool)
Obj. value = this. innerHTML;
// Remove the pop-up form
Document. body. removeChild (alertDiv );
Document. body. removeChild (alertDivParent );
};
}
}
};
// Add the button to the Search DIV
AlertQueryDiv. appendChild (alertQueryBUTTON );
// Create the Clear button
Var alertClearBUTTON = document. createElement ("input ");
AlertClearBUTTON. id = "alertClearBUTTON ";
AlertClearBUTTON. type = "button ";
AlertClearBUTTON. value = "empty ";
AlertClearBUTTON. onclick = function (){
// Assign a null value to the text box
Obj. value = "";
// Remove the pop-up form
Document. body. removeChild (alertDiv );
Document. body. removeChild (alertDivParent );
};
// Add the button to the Search DIV
AlertQueryDiv. appendChild (alertClearBUTTON );
// Create close button
Var alertCancelBUTTON = document. createElement ("input ");
AlertCancelBUTTON. id = "alertCancelBUTTON ";
AlertCancelBUTTON. type = "button ";
AlertCancelBUTTON. value = "off ";
AlertCancelBUTTON. onclick = function (){
// Remove the pop-up form
Document. body. removeChild (alertDiv );
Document. body. removeChild (alertDivParent );
};
// Add the button to the Search DIV
AlertQueryDiv. appendChild (alertCancelBUTTON );
// Create a Table with the displayed information
Var alertInfoTab = document. createElement ("table ");
AlertInfoTab. id = "alertInfoTab ";
With (alertInfoTab. style ){
Margin = 20;
}
// Calculates the number of cells that can be placed in the specified width.
Var tdWidthNum = 130;
Var tdNum = parseInt (widthNum/tdWidthNum );
Var num = 0;
For (var I = 0; I <eval (arrName). length; I ++ ){
Var header;
If (I % tdNum = 0 ){
Header = alertInfoTab. createTHead ();
Header = header. insertRow (num );
Num ++;
}
Var headerName = header. insertCell (-1 );
With (headerName. style ){
Width = tdWidthNum;
Color = "blue ";
Cursor = "pointer ";
}
// Var headerType = header. insertCell (-1 );
If (boolSet)
HeaderName. appendChild (document. createTextNode (eval (arrName + "[I]. "+ idStr) +": "+ eval (arrName +" [I]. "+ nameStr )));
Else if (! BoolSet)
HeaderName. appendChild (document. createTextNode (eval (arrName + "[I]." + nameStr )));
// HeaderType. appendChild (document. createTextNode ("Type "));
HeaderName. onclick = function (){
If (bool)
Obj. value = obj. value + this. innerHTML + ";";
Else if (! Bool)
Obj. value = this. innerHTML;
// Remove the pop-up form
Document. body. removeChild (alertDiv );
Document. body. removeChild (alertDivParent );
};
}
// Add the table to the DIV with the displayed information
AlertDiv. appendChild (alertInfoTab );
}
</Script>
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
