如何从HTML文件访问独立JS文件的方法？虚拟键盘开发遇阻

核心问题清单 #

• 执行顺序与对象定义错位：代码开头在DOM解析阶段直接执行new Keyboard(vkeyboard_keys)，但后续未定义Keyboard构造函数，反而将this.Keyboard赋值为普通字面量对象，会直接触发Keyboard is not defined的引用错误。
• 容器属性未完成赋值：init()方法中直接对值为null的this.elements.keysContainer执行querySelectorAll操作，未提前将HTML中.vkeyboard_keys对应的DOM节点挂载到对象属性上，会触发空指针读取错误。
• 按键绑定逻辑完全失效：
  • 封装好的_keyboardKeys()方法从未在初始化流程中被调用，所有按钮的点击事件不会被绑定
  • 方法内部直接使用未声明的裸变量id、Element、key、keyElement，未从遍历的DOM节点中获取对应值，运行时直接报错
  • 特殊按键的匹配规则和HTML不兼容：HTML中特殊按键多为类名标识，代码中却以DOM的id属性作为判断依据，永远无法匹配到对应的交互分支
• 内置方法逻辑错误：
  • close()方法内直接引用未定义的oninput、onclose临时变量，未正确读取对象自身的事件处理器配置
  • CapsLock状态切换逻辑中未定义keyElement变量，遍历更新按键文本时的判断条件不符合实际DOM结构

修正后的实现代码 #

调整后的HTML（保持原有结构，仅统一特殊按键的标识方便JS匹配） #

<textarea class="textfield">Text Area</textarea>

<div class="vkeyboard_keys">
  <button type="button" class="vkeyboard_key">1</button>
  <button type="button" class="vkeyboard_key">2</button>
  <button type="button" class="vkeyboard_key">3</button>
  <button type="button" class="vkeyboard_key">4</button>
  <button type="button" class="vkeyboard_key">5</button>
  <button type="button" class="vkeyboard_key">6</button>
  <button type="button" class="vkeyboard_key">7</button>
  <button type="button" class="vkeyboard_key">8</button>
  <button type="button" class="vkeyboard_key">9</button>
  <button type="button" class="vkeyboard_key">0</button>
  <button type="button" class="action-key" data-action="backspace">Back Space</button>
  <br>
  <button type="button" class="vkeyboard_key">q</button>
  <button type="button" class="vkeyboard_key">w</button>
  <button type="button" class="vkeyboard_key">e</button>
  <button type="button" class="vkeyboard_key">r</button>
  <button type="button" class="vkeyboard_key">t</button>
  <button type="button" class="vkeyboard_key">y</button>
  <button type="button" class="vkeyboard_key">u</button>
  <button type="button" class="vkeyboard_key">i</button>
  <button type="button" class="vkeyboard_key">o</button>
  <button type="button" class="vkeyboard_key">p</button>
  <button type="button" class="action-key" data-action="enter">Enter</button>
  <br>
  <button type="button" class="vkeyboard_key">a</button>
  <button type="button" class="vkeyboard_key">s</button>
  <button type="button" class="vkeyboard_key">d</button>
  <button type="button" class="vkeyboard_key">f</button>
  <button type="button" class="vkeyboard_key">g</button>
  <button type="button" class="vkeyboard_key">h</button>
  <button type="button" class="vkeyboard_key">j</button>
  <button type="button" class="vkeyboard_key">k</button>
  <button type="button" class="vkeyboard_key">l</button>
  <button type="button" class="action-key" data-action="capslock">Caps Lock</button>
  <br>
  <button type="button" class="vkeyboard_key">z</button>
  <button type="button" class="vkeyboard_key">x</button>
  <button type="button" class="vkeyboard_key">c</button>
  <button type="button" class="vkeyboard_key">v</button>
  <button type="button" class="vkeyboard_key">b</button>
  <button type="button" class="vkeyboard_key">n</button>
  <button type="button" class="vkeyboard_key">m</button>
  <button type="button" class="vkeyboard_key">-</button>
  <button type="button" class="vkeyboard_key">_</button>
  <button type="button" class="action-key" data-action="shift">Shift</button>
  <br>
  <button type="button" class="action-key" data-action="space">Space</button>
  <button type="button" class="action-key" data-action="submit">Submit</button>
</div>

修正后的JS实现 #

const Keyboard = {
  elements: {
    keysContainer: null,
    keys: [],
    activeTextField: null
  },
  eventHandlers: {
    oninput: null,
    onclose: null
  },
  properties: {
    value: "",
    capsLock: false
  },
  /**
   * 初始化虚拟键盘
   * @param {string} containerSelector 键盘容器的CSS选择器
   */
  init(containerSelector = ".vkeyboard_keys") {
    // 绑定容器DOM
    this.elements.keysContainer = document.querySelector(containerSelector);
    if (!this.elements.keysContainer) return;
    // 获取所有按键元素
    this.elements.keys = this.elements.keysContainer.querySelectorAll("button");
    // 为所有可输入文本域绑定聚焦事件
    document.querySelectorAll(".textfield").forEach(textField => {
      textField.addEventListener("focus", () => {
        this.elements.activeTextField = textField;
        this.open(textField.value, (currentValue) => {
          textField.value = currentValue;
        });
      });
    });
    // 为所有按键绑定点击事件
    this._bindKeyEvents();
  },
  /**
   * 遍历按键绑定点击逻辑
   */
  _bindKeyEvents() {
    this.elements.keys.forEach(keyEl => {
      // 识别特殊功能键
      const actionType = keyEl.dataset.action;
      keyEl.addEventListener("click", () => {
        if (actionType) {
          // 处理特殊键逻辑
          switch(actionType) {
            case "backspace":
              this.properties.value = this.properties.value.substring(0, this.properties.value.length - 1);
              this._triggerEvent("oninput");
              break;
            case "capslock":
              this._toggleCapsLock();
              break;
            case "enter":
              this.properties.value += "\n";
              this._triggerEvent("oninput");
              break;
            case "space":
              this.properties.value += " ";
              this._triggerEvent("oninput");
              break;
            case "submit":
              this.close();
              this._triggerEvent("onclose");
              break;
            case "shift":
              // 可根据需求拓展Shift键逻辑
              break;
          }
        } else {
          // 处理普通字符键
          const char = keyEl.textContent.trim();
          this.properties.value += this.properties.capsLock ? char.toUpperCase() : char.toLowerCase();
          this._triggerEvent("oninput");
        }
      })
    })
  },
  /**
   * 触发绑定的事件回调
   * @param {string} handlerName 事件名称
   */
  _triggerEvent(handlerName) {
    if (typeof this.eventHandlers[handlerName] === "function") {
      this.eventHandlers[handlerName](this.properties.value);
    }
  },
  /**
   * 切换大小写锁定状态
   */
  _toggleCapsLock() {
    this.properties.capsLock = !this.properties.capsLock;
    // 更新普通字符键的显示文本
    this.elements.keys.forEach(keyEl => {
      const isNormalKey = !keyEl.dataset.action && keyEl.textContent.trim().length === 1;
      if (isNormalKey) {
        keyEl.textContent = this.properties.capsLock ? keyEl.textContent.toUpperCase() : keyEl.textContent.toLowerCase();
      }
    })
  },
  /**
   * 打开键盘并绑定回调
   * @param {string} initialValue 输入框初始值
   * @param {function} oninput 输入回调
   * @param {function} onclose 关闭回调
   */
  open(initialValue = "", oninput, onclose) {
    this.properties.value = initialValue;
    this.eventHandlers.oninput = oninput;
    this.eventHandlers.onclose = onclose;
  },
  /**
   * 关闭键盘
   */
  close() {
    this.properties.value = "";
    this.eventHandlers.oninput = null;
    this.eventHandlers.onclose = null;
  }
}

// 等待DOM加载完成后初始化
window.addEventListener("DOMContentLoaded", () => {
  Keyboard.init();
});

关键修正点说明 #

• 移除了DOM加载前的错误实例化代码，将Keyboard定义为全局可访问的字面量对象，统一在DOMContentLoaded事件回调中完成初始化
• 通过data-action属性统一标识特殊按键，避免类名、id混用导致的匹配失效
• 将原来从未被调用的_keyboardKeys()方法替换为可遍历所有按键的事件绑定逻辑，解决裸变量未定义的问题
• 修正了close()方法的逻辑错误，正确清空事件处理器
• 补充了elements.activeTextField属性，记录当前聚焦的输入框，避免多输入框场景下的状态混乱

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