As syntax to write Html5,textfield and input boxes

Last Update:2014-07-22 Source: Internet

Author: User

Tags addchild

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

One, compare
In 1,HTML5
First look at the text display in HTML5 's canvas

var canvas = document.getElementById ("MyCanvas");
var context = Canvas.getcontext ("2d");
Context.font = "40pt Calibri";
Context.fillstyle = "#0000ff";
Context.filltext ("Text test!", 50, 150);
Entering a box in HTML is needless to say, you need to use the input tag

<input type= "text" id= "MyTextBox"/>
2, in AS

Text display
var Txt:textfield = new TextField ();
Txt.text = "word 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);
Second, the code after writing 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);
Third, the realization method
Text display is very simple, just need to create a Ltextfield class and a show method can be

function Ltextfield () {
var = 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 = 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 difficult to understand, that is, when the show method is called, it is painted on canvas,
The key is the input box, because in the HTML, the input box is a label, how to draw this tag onto the canvas? Or canvas can be a direct reality input box?
I'm not sure if there is a master who knows, I hope I can tell doll sound,
I'm going to talk about what I'm doing, I'm in the TextField is input, draw a rectangular box, and then use the Div, the textbox directly displayed in the corresponding position
My HTML starts with the following code.

<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> simulated ActionScript test-textfield</title>
<script type= "Text/javascript" src= ". /legend/legend.js "></script>
<script type= "Text/javascript" src= "./js/main.js" ></script>
<body>
<div id= "Mylegend" > page read in ......</div>
</body>
Then, using JavaScript to write a canvas and a textbox, as a 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; > ......</div> ' + in data reading
' <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;
The textbox is hidden from the beginning, and then, when you click on the rectangle I draw, it is displayed on top of the rectangle, and then when you click somewhere else, the input content is assigned to TextField and the textbox is hidden.
Not much to say, the following is the complete Ltextfield code, or you can directly right mouse to see the full code

Detailed Description: http://html5.662p.com/thread-30-1-1.html

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More