WordPress functions.php中用setAttribute给DOM添加带文本参数的onkeyup函数问题

核心问题是PHP字符串引号嵌套转义错误，再加上原有代码存在JS语法笔误，共同导致了报错和事件绑定失效：

1. 你用单引号包裹了整个echo输出的<script>内容，在PHP单引号字符串中，如果要输出普通单引号字符，必须加反斜杠\转义，否则PHP会判定字符串提前结束，抛出语法错误。
2. 原有JS代码存在笔误：let = bank_account = ... 多写了一个等号，属于JS语法错误，会导致后续事件绑定代码不执行。

方案1：修复转义和笔误，沿用setAttribute写法 #

add_action( 'woocommerce_after_checkout_form', 'addJsInCheckout');

function addJsInCheckout() {
    echo '<script>
            let bank_account = document.getElementById("bank_account");
            bank_account.setAttribute("maxlength", "23");
            // 用转义单引号包裹JS文本参数，PHP会自动解析为普通单引号输出到前端
            bank_account.setAttribute("onkeyup", "limitTextCount(\'bank_account\', \'divcount\', \'23\')");
         </script>';
}

方案2：使用addEventListener绑定（更推荐） #

完全避免引号嵌套转义问题，事件绑定的兼容性和可控性也优于直接设置onkeyup属性：

add_action( 'woocommerce_after_checkout_form', 'addJsInCheckout');

function addJsInCheckout() {
    echo '<script>
            let bank_account = document.getElementById("bank_account");
            bank_account.setAttribute("maxlength", "23");
            bank_account.addEventListener("keyup", function() {
                limitTextCount("bank_account", "divcount", "23");
            });
         </script>';
}

内容的提问来源于stack exchange，提问作者Caín