首页前端开发HTML用仿ActionScript的语法来编写html5――第六篇，TextField与输入框

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

时间2024-01-26 11:11:02发布访客分类HTML浏览903
导读：收集整理的这篇文章主要介绍了html5教程-用仿ActionScript的语法来编写html5――第六篇，TextField与输入框，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家...
收集整理的这篇文章主要介绍了html5教程-用仿ActionScript的语法来编写html5――第六篇，TextField与输入框，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

 

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

 

 

用仿ActionScript的语法来编写htML5——第一篇，

用仿ActionScript的语法来编写html5——第二篇，利用sprite来实现动画

用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动

用仿ActionScript的语法来编写html5——第四篇，继承与简单的rpg

 

用仿ActionScript的语法来编写html5——第五篇，Graphics绘图

 

一，对比

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标签

 

input tyPE="text" id="myTextbox" />  

 

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里一开始只有下面代码

 

!DOCTYPE html>  

html>  

head>  

meta http-equiv="Content-type" content="text/html; charset=utf-8">  

tITle> 仿ActionScript测试-TextField/title>  

script type="text/javascript" src="../legend/legend.js"> /script>   

script type="text/javascript" src="./js/Main.js"> /script>   

/head>  

body>  

p id="mylegend"> 页面读取中……/p>  

/body>  

/html>  

 

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

 

LGlobal.object = document.getElementById(id);  

LGlobal.object.innerHTML='p id="' + LGlobal.id + '_inittxt" style="position:absolute; margin:0px 0px 0px 0px; width:'+width+'px; height:'+height+'px; "> 数据读取中……/p> ' +  

'p style="position:absolute; margin:0px 0px 0px 0px; z-index:0; "> canvas id="' + LGlobal.id + '_canvas"> 您的浏览器不支持HTML5/canvas> /p> '+ 

'p id="' + LGlobal.id + '_InputText" style="position:absolute; margin:0px 0px 0px 0px; z-index:10; display:none; "> input type="text" id="' + LGlobal.id + '_InputTextBox" /> /p> ';  

 

 

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小屋

 

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

 

 

用仿ActionScript的语法来编写html5——第一篇，

用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画

用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动

用仿ActionScript的语法来编写html5——第四篇，继承与简单的rpg

 

用仿ActionScript的语法来编写html5——第五篇，Graphics绘图

 

一，对比

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标签

 

input type="text" id="myTextbox" />  

 

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里一开始只有下面代码

 

!DOCTYPE html>  

html>  

head>  

meta http-equiv="Content-Type" content="text/html; charset=utf-8">  

title> 仿ActionScript测试-TextField/title>  

script type="text/javascript" src="../legend/legend.js"> /script>   

script type="text/javascript" src="./js/Main.js"> /script>   

/head>  

body>  

p id="mylegend"> 页面读取中……/p>  

/body>  

/html>  

 

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

 

LGlobal.object = document.getElementById(id);  

LGlobal.object.innerHTML='p id="' + LGlobal.id + '_inittxt" style="position:absolute; margin:0px 0px 0px 0px; width:'+width+'px; height:'+height+'px; "> 数据读取中……/p> ' +  

'p style="position:absolute; margin:0px 0px 0px 0px; z-index:0; "> canvas id="' + LGlobal.id + '_canvas"> 您的浏览器不支持HTML5/canvas> /p> '+ 

'p id="' + LGlobal.id + '_InputText" style="position:absolute; margin:0px 0px 0px 0px; z-index:10; display:none; "> input type="text" id="' + LGlobal.id + '_InputTextBox" /> /p> ';  

 

 

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教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

divHTMLhtml5post-format-gallerythis

若转载请注明出处： 用仿ActionScript的语法来编写html5――第六篇，TextField与输入框
本文地址： https://pptw.com/jishu/586683.html
HTML5 椭圆（蛋）运动的小球 用仿ActionScript的语法来编写html5――第三篇，鼠标事件与游戏人物移动

游客 回复需填写必要信息
↑