Question

此代码采用输入的10位数电话号码并对其进行格式化，以便DB的所有条目遵循相同的格式。代码按原样工作，但问题是HTML是动态生成的，并且Id发生了变化。它始终以＆＃34; phone＆＃34;但是会添加数字和短划线来破坏代码（例如，电话-59-0-1）＆＃34; name＆＃34;和＆＃34;班＆＃34;保持不变，但似乎无法使用这些元素让它发挥作用。

<form name="registration_form" id="registration_form">
<input type="text" name="phone" id="phone" class="ee-reg-page-questions ee-reg-page-text-input  phone" />
</form>

<script>
var x = document.getElementById("phone");
x.addEventListener("blur", formatPhone, true);


function formatPhone() {
var obj = document.getElementById("phone");
var numbers = phone.value.replace(/\D/g, ''),
    char = {0:'(',3:') ',6:'-'};
    obj.value = '';
    for (var i = 0; i < numbers.length; i++) {
    obj.value += (char[i]||'') + numbers[i];
    }
}
</script>

此处尝试使用getElementByClassName：

function formatPhone() {
    var obj = document.getElementsByClassName("ee-reg-page-questions ee-reg-page-text-input  phone")[0];
    var numbers = phone.value.replace(/\D/g, ''),
        char = {0:'(',3:') ',6:'-'};
    obj.value = '';
    for (var i = 0; i < numbers.length; i++) {
        obj.value += (char[i]||'') + numbers[i];
    }
}

Answer 1

变化：

var obj = document.getElementsByClassName("ee-reg-page-questions ee-reg-page-text-input  phone")[0];

为：

var obj = document.getElementsByClassName("phone")[0];

该函数只接受一个类，而不是包含该元素所有类的字符串。

整个代码应该是：

var x = document.getElementsByClassName("phone")[0];
x.addEventListener("blur", formatPhone, true);

function formatPhone() {
    var obj = document.getElementsByClassName("phone")[0];
    var numbers = obj.value.replace(/\D/g, ''),
        char = {0:'(',3:') ',6:'-'};
    obj.value = '';
    for (var i = 0; i < numbers.length; i++) {
        obj.value += (char[i]||'') + numbers[i];
    }
}

FIDDLE

如果您只想要包含所有三个类的元素，请使用：

var obj = document.querySelector(".ee-reg-page-questions.ee-reg-page-text-input.phone");

Answer 2

尝试使用： document.getElementsByName（“phone”）[0];

这意味着您正在尝试访问由函数document.getElementsByName（“phone”）给出的数组的第一个元素。

通过这个你不必了解元素的id。

Answer 3

我有点同意Barmar，但我做了一个快速搜索，已经有了一个可行的解决方案：Can you use a wildcard in getElementById?

他们使用querySelectorAll和一些外卡来获得你想要的东西（而不是getElementById）。

Answer 4

简单地这样做：

var x = document.getElementsByClassName("phone");

for (var i = 0; i < x.length; i++) {
    x[i].addEventListener("blur", function () {
        var obj = this,
            numbers = obj.value.replace(/\D/g, ''),
            char = {
                0: '(',
                3: ') ',
                6: '-'
            };

        obj.value = '';

        for (var i = 0; i < numbers.length; i++) {
            obj.value += (char[i] || '') + numbers[i];
        }
    }, true);
}

当Id发生变化时，getElementById会中断

4 个答案: