cocos2dx-js 将html控件元素转换成cc.Node

最新推荐文章于 2021-06-11 13:47:49 发布

DongEnLai_CodeNice

最新推荐文章于 2021-06-11 13:47:49 发布

阅读量611

点赞数

分类专栏： Cocos2dx-js 文章标签： cocos2dx-html5 输入框

本文链接：https://blog.csdn.net/code_nice/article/details/79161791

版权

Cocos2dx-js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前言: cocos2dx-html5 没有支持输入框我们的做法是通过javascript 创建 input textarea 添加 container上面

做法：

var inputStr = document.createElement("input");

text：文本属性 value:文本内容  style:文本样式 with height top left position等 但是对其位置来很恶心 得根据 container去做位置改变

但是下面要介绍到是更为省事到办法

var DOMUtil = function() {}
DOMUtil.createTextArea = function(......) {
var textArea = cc.newElement("textarea");
textArea.style.fontSize = fontSize + "px";
textArea.style.color = fontColor;
textArea.style.background = background;
textArea.style.width = "100%";
textArea.style.height = "100%";
textArea.style.resize = "none";

var textAreaDOM = new cc.Sprite();
textAreaDOM.draw = function () {};
textArea._textAreaDOM = textArea;
parent.addChild(textAreaDOM, 0, "textAreaDOM");
cc.DOM.convert(textAreaDOM);
textAreaDOM.dom.appendChild(textArea);
textAreaDOM.dom.style.width = width + "px";
textAreaDOM.dom.style.height = height + "px";
textAreaDOM.canvas.remove();
textAreaDOM.setPosition(posx, posy);
return textArea;
};

使用的时候只需要:
this._textArea = DOMUtil.createTextArea(this, ......);
// 可以用cocos的方式添加监听，比如实现CMD+ENTER提交内容的功能
cc._addEventListener(this._textArea, "keypress",
function (e) {
if (e.keyCode === cc.KEY.enter && e.ctrlKey == true) {
// 提交内容
e.preventDefault();
}
);