如何更改inputElement javascript？

我找到了一个代码，可以在表单中重新格式化电话号码。它工作得很好，我必须为它提供表单输入id，以识别脚本将检查哪个字段，但问题是每次我更新表单时，输入id都会更改，我无法更改输入id并使其保持静态

我想知道是否可以使用占位符或数据标签，而不是ID

下面是引用输入ID的代码片段，完整的格式代码如下

const inputElement = document.getElementById('1d72b826f2fca893b7198aa3f208265f-3');
inputElement.addEventListener('keydown',enforceFormat);
inputElement.addEventListener('keyup',formatToPhone);

表单代码如下所示

<input id="1d72b826f2fca893b7198aa3f208265f-3" name="UGhvbmUgTnVtYmVy" value="" placeholder="Phone Number" data-label-inside="Phone Number" class="shortnice form-input  required  shadow-inside  checknumericvalue  validatePhone" type="text">

以下是完整的代码，以防万一：

ijQuery(document).ready(function () {
  const isNumericInput = (event) => {
    const key = event.keyCode;
    var test = event.target.value.replace(/\D/g,'').substring(0,1);
    if(test.length <= 0){
        return ((key >= 50 && key <= 57) || // Allow number line
            (key >= 98 && key <= 105) // Allow number pad
        );
  }else{
        return ((key >= 48 && key <= 57) || // Allow number line
            (key >= 96 && key <= 105) // Allow number pad
        );
    }
};

const isModifierKey = (event) => {
    const key = event.keyCode;
    return (event.shiftKey === true || key === 35 || key === 36) || // Allow Shift, Home, End
        (key === 8 || key === 9 || key === 13 || key === 46) || // Allow Backspace, Tab, Enter, Delete
        (key > 36 && key < 41) || // Allow left, up, right, down
        (
            // Allow Ctrl/Command + A,C,V,X,Z
            (event.ctrlKey === true || event.metaKey === true) &&
            (key === 65 || key === 67 || key === 86 || key === 88 || key === 90)
        )
};

const enforceFormat = (event) => {
    // Input must be of a valid number format or a modifier key, and not longer than ten digits
    if(!isNumericInput(event) && !isModifierKey(event)){
        event.preventDefault();
    }
};

const formatToPhone = (event) => {
    if(isModifierKey(event)) {return;}

    // I am lazy and don't like to type things more than once
    const target = event.target;
    const input = event.target.value.replace(/\D/g,'').substring(0,10); // First ten digits of input only
    const zip = input.substring(0,3);
    const middle = input.substring(3,6);
    const last = input.substring(6,10);

    if(input.length > 6){target.value = `${zip}${middle}${last}`;}
    else if(input.length > 3){target.value = `${zip}${middle}`;}
    else if(input.length > 0){target.value = `${zip}`;}
};

const inputElement = document.getElementById('1d72b826f2fca893b7198aa3f208265f-3');
inputElement.addEventListener('keydown',enforceFormat);
inputElement.addEventListener('keyup',formatToPhone);
var fieldLabel = 'Phone Number';
    ijQuery.validator.addMethod('validatePhone', function (value, element) {
    if (value.length>=10) {
     return true;
       } else {
     return false;
       }
 });
 ijQuery('form [name="' + base64_encode(fieldLabel) + '"]').addClass('validatePhone');
 ijQuery.extend(ijQuery.validator.messages, {
 validatePhone: 'is invalid.'
});
});

---

我认为您正在使用jQuery

因此，您可以使用类似$'[name=UGhvbmUgTnVtYmVy]'或$'[data label inside=Phone Number]'或$'[placeholder=Phone Number]这样的选择器

您还可以在括号前添加输入，以仅选择输入字段，例如$'input[name=UGhvbmUgTnVtYmVy]'

---

也许您需要这样称呼它：jQuery“[name=UGhvbmUgTnVtYmVy]”。

首先我们需要使用document.getElementById获取元素。然后我们可以访问输入元素的value属性并更改它

功能改变{ document.getElementById'input'。value='Other value'； } 单击我您可以使用给输入一个特定的类来选择它。要按类选择元素，只需执行以下操作：

$('.nameofclass'); //jQuery)

或

通过这种方式，您可以检查多个输入的值，而不是仅通过id检查一个输入的值

$'.myClass'.val-==SomeValue==-；

---

使用jQuery[attribute=value]选择器查找输入

像这样：

$('placeholder="Phone Number"')

或

这将为您提供所需的输入

注意：如果页面上有多个具有此属性和值的元素，它将返回所有元素

---

请参阅，以获取有关如何工作和工作演示的更多信息。

可能重复的“是”，您也可以使用属性来选择案例文档中的元素。querySelector'input[placeholder=Phone Number]'

$('placeholder="Phone Number"')

$('data-label-inside="Phone Number"')