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

我就是我 2022-10-06 09:47 163阅读 0赞

用仿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的时候，先画一个矩形方框，然后利用p，把textbox直接显示在相应的位置上

我的html里一开始只有下面代码

仿actionscript测试-textfield

页面读取中……

然后，利用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\});

看一下成果吧,看不到效果的请下载支持html5的浏览器

https://fsanguo.comoj.com/html5/jstoas05/index.html

点击输入框，textbox会自动显示，输入后点击其他地方，textbox自动消失

摘自 lufy小屋

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html5登陆框,流动异彩的html5表单登录框

相关 html添加密码输入框,HTML input password密码输入框简介说明

相关 html5输入框语法检测,用仿ActionScript的语法来编写html5——第六篇，TextField与输入框...

相关 html5输入框语法检测,html5规定是否对元素进行拼写和语法检查的属性spellcheck

相关 HTML5中input输入框的种类

相关 HarmonyOS 输入框TextField的使用

相关仿google输入框

相关 HTML5--输入验证

相关 HTML5--语法

相关 h5 输入提示框