Question

我找到了一个代码，可以重新格式化电话号码的格式。效果很好，我必须提供表单输入ID，因为它可以识别脚本将检查的字段，但是问题是每次我更新表单时，输入ID都会更改，并且我无法更改输入ID并将其设为静态。

我想知道是否可以使用占位符或data-label-inside或name代替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.'
});
});

Answer 1

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

function change() {
document.getElementById('input').value = 'Other value';
}

<input id="input" value="heythere" /> 
<button onclick="change()">click me</button>

Answer 2

您可以使用给input一个特定的类来选择它。要按类选择元素，只需执行以下操作：

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

或

document.querySelectorAll('.nameofclass'); //native Javascript

这样，您可以检查多个输入的值，而不是仅检查一个（通过id）。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="myClass" type="text">
<script>
$('.myClass').val("--==SomeValue==--");
</script>

您还可以通过元素data-attribute data-label-inside来选择元素：

$('[data-label-inside="Phone Number"]') //jQuery

或

document.querySelector('[data-label-inside="Phone Number"]')

<input data-label-inside="Phone Number" type="text">
<script>
document.querySelector('[data-label-inside="Phone Number"]').value = "!!!value!!!";
</script>

您还可以通过占位符选择元素。

$('input[placeholder="Phone Number"]'); //jQuery

或

document.querySelector('input[placeholder="Phone Number"]');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="Phone Number" type="text">
<script>
console.log($('input[placeholder="Phone Number"]').attr('type'));
</script>

您可以使用input和placeholder的名称来选择data-attribute。

$('input[name=nameofinput]');

或

document.querySelector('input[name=nameofinput]');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="input" type="text">
<script>
$('input[name=input]').prop('value', "value");
$('input[name=input]').prop('disabled', true);
</script>

Answer 3

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

赞：

$('placeholder="Phone Number"')

或

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

这将为您提供所需的输入。

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

有关this的工作原理和有效的演示，请参见{{3}}。

Answer 4

我认为您正在使用jQuery。

因此，您可以使用$('[name="UGhvbmUgTnVtYmVy"]')或$('[data-label-inside="Phone Number"]')或$('[placeholder="Phone Number"]')之类的选择器。

您也可以在方括号之前添加输入，以仅选择输入字段，例如$('input[name="UGhvbmUgTnVtYmVy"]')。

也许您需要这样称呼它：jQuery('[name="UGhvbmUgTnVtYmVy"]')。

如何更改inputElement javascript？

4 个答案: