在Adobe Animate HTML5文档中为元件添加动态输入框问题

你创建的输入框已存在于DOM中但无法在舞台可见，通常是因为DOMElement的定位、样式或层级设置缺失导致的，以下是具体修复方案：

核心修复步骤 #

• 设置DOMElement的坐标位置
  CreateJS的DOMElement采用页面绝对定位，其坐标基于Canvas的坐标系，需明确设置x/y值才能让它出现在舞台可视区域内：

  domElement.x = 50;
  domElement.y = 50;
  

  同时确认symbolInstance本身的坐标未被偏移或设置为隐藏状态。

• 为输入框添加基础样式
  默认创建的input元素宽度为0，导致视觉上不可见，需手动设置尺寸和边框：

  inputElement.style.width = "200px";
  inputElement.style.height = "30px";
  inputElement.style.border = "1px solid #000"; // 可选，帮助快速定位元素
  

• 调整DOMElement的显示层级
  如果symbolInstance中包含其他子元素，可能会遮挡输入框，可将其移至最上层：

  symbolInstance.addChildAt(domElement, symbolInstance.numChildren - 1);
  

• 检查Canvas容器的定位属性
  确保Adobe Animate导出的Canvas父容器设置了position: relative，否则DOMElement的绝对定位会基于整个页面，可能超出视口范围。

修正后的完整代码示例 #

var symbolInstance = this.pos;

var inputElement = document.createElement("input");
inputElement.type = "text";
// 配置输入框样式
inputElement.style.width = "200px";
inputElement.style.height = "30px";
inputElement.style.border = "1px solid #333";

var domElement = new createjs.DOMElement(inputElement);
// 设置元素在舞台中的位置
domElement.x = 20;
domElement.y = 20;

symbolInstance.addChild(domElement);
// 确保输入框显示在最上层
symbolInstance.setChildIndex(domElement, symbolInstance.numChildren - 1);

内容的提问来源于stack exchange，提问作者aircube