AS syntax to write HTML5, TextField and input box, html5textfield
I. Comparison
1. html5
First, let's look at the text display in the html5 canvas.
Var canvas = document. getElementById ("myCanvas ");
Var context = canvas. getContext ("2d ");
Context. font = "40pt Calibri ";
Context. fillStyle = "# 0000ff ";
Context. fillText ("text test! ", 50,150 );
The input box in html does not need to be added. The input tag is required.
<Input type = "text" id = "myTextbox"/>
2. In the
// Text display
Var txt: TextField = new TextField ();
Txt. text = "text test! ";
Txt. x = 50;
Txt. y = 50;
AddChild (txt );
// Input box
Var txt: TextField = new TextField ();
Txt. type = TextFieldType. INPUT;
Txt. x = 50;
Txt. y = 50;
AddChild (txt );
2. Compile the code after the js class library
// Text display
Var txt = new LTextField ();
. Txt. x = 100;
Txt. text = "TextField test ";
AddChild (txt );
// Input box
Var txt1 = new LTextField ();
Txt1.x = 100;
Txt1.y = 50;
Txt1.setType (LTextFieldType. INPUT );
AddChild (txt1 );
3. Implementation Method
Text display is very simple. You only need to create an LTextField class and a show method.
Function LTextField (){
Var self = this;
Self. objectindex = ++ LGlobal. objectIndex;
Self. type = "LTextField ";
Self. texttype = null;
Self. x = 0;
Self. y = 0;
Self. text = "";
Self. font = "UTF-8 ";
Self. size = "11 ";
Self. color = "#000000 ";
Self. textAlign = "left ";
Self. textBaseline = "middle ";
Self. lineWidth = 1;
Self. stroke = false;
Self. visible = true;
}
LTextField. prototype = {
Show: function (cood ){
If (cood = null) cood = {x: 0, y: 0 };
Var self = this;
If (! Self. visible) return;
LGlobal. canvas. font = self. size + "pt" + self. font;
LGlobal. canvas. textAlign = self. textAlign;
LGlobal. canvas. textBaseline = self. textBaseline;
LGlobal. canvas. lineWidth = self. lineWidth;
If (self. stroke ){
LGlobal. canvas. strokeStyle = self. color;
LGlobal. canvas. strokeText (self. text, parseFloat (cood. x) + parseFloat (self. x ),
ParseFloat (cood. y) + parseFloat (self. y) + parseFloat (self. size ));
} Else {
LGlobal. canvas. fillStyle = self. color;
LGlobal. canvas. fillText (self. text, parseFloat (cood. x) + parseFloat (self. x ),
ParseFloat (cood. y) + parseFloat (self. y) + parseFloat (self. size ));
}
}
}
The code is not hard to understand, that is, when you call the show method, you just need to draw it on the canvas,
The key is the input box. In html, the input box is a label. How can I draw this label on the canvas? Or can canvas be directly input into a real box?
I am not quite sure about this. If you know it, I hope you can tell me,
Let me talk about my practice now. When textField is input, I first draw a rectangular box and then use div to display the textbox directly in the corresponding position.
At first, only the following code is available in my html.
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> test-TextField simulation </title>
<Script type = "text/javascript" src = ".../legend. js"> </script>
<Script type = "text/javascript" src = "./js/Main. js"> </script>
</Head>
<Body>
<Div id = "mylegend"> reading the page ...... </Div>
</Body>
</Html>
Then, use javascript to write a canvas and a textbox for preparation.
LGlobal. object = document. getElementById (id );
LGlobal. object. innerHTML = '<div id = "' + LGlobal. id + '_ inittxt "style =" position: absolute; margin: 0px 0px 0px 0px; width:' + width + 'px; height: '+ height + 'px; "> reading data ...... </Div> '+
'<Div style = "position: absolute; margin: 0px 0px 0px 0px; z-index: 0;"> <canvas id = "' + LGlobal. id + '_ canvas "> your browser does not support [color = #444444! Important] HTML5 </canvas> </div> '+
'<Div id = "' + LGlobal. id + '_ InputText "style =" position: absolute; margin: 0px 0px 0px 0px; z-index: 10; display: none; "> <input type =" text "id =" '+ LGlobal. id + '_ InputTextBox "/> </div> ';
LGlobal. canvasObj = document. getElementById (LGlobal. id + "_ canvas ");
LGlobal. inputBox = document. getElementById (LGlobal. id + '_ inputtext ');
LGlobal. inputTextBox = document. getElementById (LGlobal. id + '_ InputTextBox ');
LGlobal. inputTextField = null;
First, hide textbox. Then, when you click the rectangle box that I have drawn, show it to the rectangle box, and then click somewhere else, assign input content to textField and hide textbox
The specific practice is not to mention. The following is the complete LTextField code, or you can click the right button to view the complete code.
Http://html5.662p.com/thread-30-1-1.html
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> only numbers can be entered for regular expressions. </title>
<Meta name = "Keywords" content = ""/>
<Meta name = "Description" content = ""/>
<Link rel = "stylesheet" href = "css/. css"/>
</Head>
<Body>
<Input type = "text" id = "txt"/>
<Button id = "btn"> OK </button>
<Script>
Var txt = document. getElementById ('txt ')
Var btn = document. getElementById ('btn ')
Var reg =/^ \ d * $/
Btn. onclick = function (){
Var val = txt. value
If (! Reg. test (val )){
Alert ('only numbers can be entered! ')
}
}
</Script>
</Body>
</Html>
How does java make a good-looking input box? It's not TextField. For example, you can add a background to the input box,
Try adding a background image to Swing programming. But it is not very common now.
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
