用仿ActionScript的语法来编写html5——第六篇，TextField与输入框

用仿actionscript的语法来编写html5——第六篇，textfield与输入框

一，对比
1,html5中
首先看看在html5的canvas中的文字显示

var canvas = document.getElementById("myCanvas");    var context = canvas.getContext("2d");    context.font = "40pt Calibri";    context.fillStyle = "#0000ff";  context.fillText("文字测试!", 50, 150);

登录后复制

在html中输入框就不用说了，需要用到input标签

登录后复制

2,在as中

//文字显示  var txt:TextField = new TextField();  txt.text = "文字测试!";  txt.x = 50;  txt.y = 50;  addChild(txt);  //输入框  var txt:TextField = new TextField();  txt.type = TextFieldType.INPUT;  txt.x = 50;  txt.y = 50;  addChild(txt);

登录后复制

二,编写js类库后的代码

立即学习“前端免费学习笔记（深入）”；

//文字显示  var txt = new LTextField();  txt.x = 100;  txt.text = "TextField 测试";  addChild(txt);  //输入框  var txt1 = new LTextField();  txt1.x = 100;  txt1.y = 50;  txt1.setType(LTextFieldType.INPUT);  addChild(txt1);

登录后复制

三,实现方法
文字显示非常简单，只需要建立一个LTextField类和一个show方法就可以了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));          }      }  }

登录后复制

代码不难理解，就是调用show方法的时候，把它画在canvas上面而已，
关键是输入框，因为html中，输入框是一个标签，怎么把这个标签画到canvas上？或者说canvas可以直接现实输入框？
这个我不太清楚，如果有高手知道的话，希望能告诉偶一声，
我现在说一说我的做法，我是在textField是input的时候，先画一个矩形方框，然后利用div，把textbox直接显示在相应的位置上
我的html里一开始只有下面代码

nbsp;html>                    
页面读取中……
    

登录后复制

然后，利用javascript写入一个canvas和一个textbox，作为准备工作

LGlobal.object = document.getElementById(id);  LGlobal.object.innerHTML='数据读取中……' +   '您的浏览器不支持HTML5'+  '';      LGlobal.canvasObj = document.getElementById(LGlobal.id+"_canvas");  LGlobal.inputBox = document.getElementById(LGlobal.id + '_InputText');  LGlobal.inputTextBox = document.getElementById(LGlobal.id + '_InputTextBox');  LGlobal.inputTextField = null;

登录后复制

一开始将textbox隐藏，然后的做法是，当点击我画的矩形方框的时候，将它显示到矩形方框上面，然后当点击其他地方的时候，把输入的内容赋值给textField后隐藏textbox
具体做法不多说了，下面是完整的LTextField代码，或者你一会儿可以直接鼠标右健看完整代码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;          if(self.texttype == LTextFieldType.INPUT){              self.inputBackLayer.show({x:self.x+cood.x,y:self.y+cood.y});              if(LGlobal.inputBox.name == "input"+self.objectindex){                  LGlobal.inputBox.style.marginTop = (self.y+cood.y) + "px";                  LGlobal.inputBox.style.marginLeft = (self.x+cood.x) + "px";              }          }          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));          }      },      setType:function(type){          var self = this;          if(self.texttype != type && type == LTextFieldType.INPUT){              self.inputBackLayer = new LSprite();              self.inputBackLayer.graphics.drawRect(1,"black",[0, 0, 150, 20],true,"#cccccc");              self.inputBackLayer.addEventListener(LMouseEvent.MOUSE_DOWN, function(){                  if(self.texttype != LTextFieldType.INPUT)return;                  LGlobal.inputBox.style.display = "";                  LGlobal.inputBox.name = "input"+self.objectindex;                  LGlobal.inputTextField = self;                  LGlobal.inputTextBox.value = self.text;              });          }else{              self.inputBackLayer = null;          }          self.texttype = type;      },      mouseEvent:function (event,type,cood){          if(cood==null)cood={x:0,y:0};          var self = this;          if(self.inputBackLayer == null)return;          self.inputBackLayer.mouseEvent(event,type,{x:self.x+cood.x,y:self.y+cood.y});                }  }

登录后复制

以上就是用仿actionscript的语法来编写html5——第六篇，textfield与输入框的内容，更多相关内容请关注PHP中文网（www.php.cn）！