cocos2dx-js 將html控制元件元素轉換成cc.Node
阿新 • • 發佈：2019-02-17
前言: 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();
}
);