WordPress环境下使用JavaScript为input字段设置inputmode属性失败排查

你的代码存在以下几处语法错误导致无法运行：

• 引号使用了中文全角字符：代码中“DOMContentLoaded”、‘input[type=“number”]里的引号都是中文全角格式，不符合JS语法要求，必须替换为英文半角引号'或"
• 选择器语法不完整：document.querySelectorAll的参数缺少了属性选择器的闭合方括号]，导致无法匹配到任何type="number"的输入框
• 变量声明关键字错误：JS大小写敏感，Let是错误写法，必须改为小写的let
• 方法调用语法错误：element. setAttribute 中间多余空格会导致调用失败，需删除空格改为element.setAttribute
• 整体结构括号不匹配：DOMContentLoaded 事件回调缺少闭合的})，外层自执行函数的括号位置错位，整体语法不合法，无法正常解析运行

修正后可正常运行的代码 #

(function($) {
  document.addEventListener("DOMContentLoaded", () => {
    let numberInputs = document.querySelectorAll('input[type="number"]');
    for (let i = 0; i < numberInputs.length; i++) {
      let element = numberInputs[i];
      element.setAttribute("inputmode", "numeric");
    }
  });
})(jQuery);

适配WordPress的更优写法（推荐） #

(function($) {
  // 使用jQuery内置的DOM就绪监听，适配WordPress的jQuery加载规则
  $(function() {
    $('input[type="number"]').attr('inputmode', 'numeric');
  });
})(jQuery);

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