使用 setAttribute() 将 onkeyup 函数添加到函数中带有文本参数的 DOM 元素

Question

我正在尝试将使用 setAttribute 的函数添加到在我的 WordPress php 文件 (functions.php) 中执行所有这些操作的 DOM 元素。

这是我的 HTML 元素：

<input type="text" class="input-text " name="bank_account" id="bank_account">

这是我的 PHP 函数：

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.setAttribute("onkeyup", "limitTextCount("bank_account", "divcount", "23")");
         </script>';
}

注意事项：

1.- 我在代码中正确设置了maxlength 属性。

2.- 如果我删除引号并将参数添加为数字，它可以工作，但不能作为文本 (bank_account.setAttribute("onkeyup", "limitTextCount(bank_account, divcount, 23)");)。

另一方面，我尝试了以下两种方式：

• bank_account.setAttribute("onkeyup", "limitTextCount("'bank_account'", "'divcount'", "'23'")");

• bank_account.setAttribute("onkeyup", "limitTextCount('"bank_account"', '"divcount"', '"23"')");

但是两种方式都给我一个错误，我得到一个错误：

syntax error, unexpected '"bank_account"' (T_CONSTANT_ENCAPSED_STRING), expecting ',' or ';'

最后，我只是测试了一下：

• bank_account.setAttribute("onkeyup", "limitTextCount("bank_account", "divcount", "23")");

尽管我没有收到任何语法错误，但该函数并未添加到元素中。

有人可以帮帮我吗？我不知道如何告诉它把我的参数作为文本。

Answer 1

您正在混淆报价。解决这个问题的最简单方法是退出 PHP 模式，编写 HTML 代码，该 HTML 将自动 echo，然后切换回来。

编辑

与其对事件使用setAttribute，不如使用addEventListener 可能是更安全的选择。

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