JS原始值赋值对DOM影响及输入框限制技巧

本文深入解析了JavaScript原始值赋值机制在DOM操作中的影响，聚焦于输入框字符限制这一常见场景。当把`input.value`等DOM元素属性赋值给局部变量时，实际上创建的是值的副本，修改副本不会影响原始DOM元素。针对这一问题，文章强调应直接修改DOM元素的属性，而非操作局部变量。同时，结合实例，给出了使用JavaScript限制输入框字符长度的正确方法，并通过`oninput`事件实现实时校验，提升用户体验。此外，文章还提醒开发者注意`type="number"`输入框`maxlength`属性的特殊性，强调理解JavaScript中原始值与引用值赋值行为差异的重要性，从而编写更健壮的DOM操作代码。

本文深入探讨了JavaScript中原始值（如字符串）的赋值机制及其对DOM操作的影响。通过分析一个常见的输入框字符限制问题，阐明了将DOM元素属性（如input.value）赋值给局部变量时，实际上是创建了一个值的副本。因此，对该局部变量的修改不会同步反映到原始DOM元素上。文章提供了正确的解决方案，即直接修改DOM元素的属性，并强调了理解JavaScript中原始值与引用值赋值行为的重要性。

理解JavaScript中的值赋值

在JavaScript中，变量的赋值行为取决于其所存储的数据类型。数据类型主要分为两大类：原始值（Primitive Values）和引用值（Reference Values）。

• 原始值包括字符串（String）、数字（Number）、布尔值（Boolean）、null、undefined、Symbol和BigInt。当一个原始值被赋给一个变量时，实际上是该值的一个副本被创建并存储在新变量中。这意味着新变量与原变量之间是独立的，对其中一个的修改不会影响另一个。
• 引用值包括对象（Object）、数组（Array）和函数（Function）。当一个引用值被赋给一个变量时，实际上传递的是存储在内存中的对象的引用地址。这意味着新变量和原变量都指向内存中的同一个对象。因此，通过任一变量对该对象的修改都会反映在另一个变量上。

对于HTML输入框的value属性，它通常是一个字符串，属于原始值类型。

输入框字符限制的常见陷阱

考虑一个常见的需求：限制用户在输入框中输入的字符数量。开发者可能会尝试编写如下JavaScript函数：

function maximum(object) {
    const maxlength = 2; // 假设最大长度为2
    let x = object.value; // 将input.value赋值给局部变量x
    if (x.length > maxlength) {
        x = x.slice(0, maxlength); // 修改局部变量x
    }
    // 此时，x已被截断，但object.value并未改变
}

以及对应的HTML：

<input type="number" name="year" id="year" placeholder="YY" oninput="maximum(this)">

当用户在输入框中输入字符时，oninput事件会触发maximum函数，并将当前的输入框元素作为object参数传递。在函数内部，let x = object.value;这行代码会将object.value（一个字符串原始值）的当前内容复制一份给局部变量x。

问题在于，当x = x.slice(0, maxlength);执行时，x被修改为新的截断后的字符串，但这仅仅改变了x这个局部变量的值。由于x是object.value的一个独立副本，对x的修改不会影响到原始的object.value属性。因此，用户在输入框中看到的值并不会被限制。

正确的解决方案：直接修改DOM属性

要正确地限制输入框的字符数量，我们必须直接修改DOM元素的value属性。这是因为object.value是DOM元素的一个可读写属性，对其赋值会直接更新DOM的状态，从而反映在用户界面上。

以下是正确的实现方式：

function maxLengthCheck(object) {
    // 直接判断并修改object.value
    if (object.value.length > object.maxLength) { // 假设input元素设置了maxLength属性
        object.value = object.value.slice(0, object.maxLength);
    }
    // 如果没有设置maxLength属性，可以硬编码最大长度
    // const customMaxLength = 2;
    // if (object.value.length > customMaxLength) {
    //     object.value = object.value.slice(0, customMaxLength);
    // }
}

对应的HTML示例：

<input name="myInput_DRS"
       oninput="maxLengthCheck(this)"
       type="number"
       placeholder="Type..."
       min="1"
       max="999"
       maxlength=&quot;2&quot; /&gt; <!-- 注意：对于type="number"，maxLength属性通常被浏览器忽略，但在此作为示例 -->

在这个maxLengthCheck函数中，当object.value.length超过指定的最大长度时，object.value = object.value.slice(0, object.maxLength);这行代码直接将截断后的字符串重新赋值给了object（即输入框元素）的value属性。这样，输入框的实际显示内容就会立即更新，从而实现了字符数量的限制。

注意事项：

• 对于type="number"的输入框，HTML的maxlength属性通常不会生效，浏览器会根据min和max属性来限制数值大小。如果需要限制数字输入时的字符长度，上述JavaScript方法是有效的。
• 在实际应用中，建议结合oninput事件进行实时校验，以提供更好的用户体验。

总结

这个案例清晰地揭示了JavaScript中原始值赋值和引用值赋值的关键区别。当处理DOM元素的属性（特别是那些存储原始值的属性，如input.value、element.id、element.className等）时，务必记住：

1. 将这些属性的值赋给一个局部变量，只会创建该值的一个独立副本。
2. 对该局部变量的任何修改，都不会影响到原始的DOM属性。
3. 要改变DOM元素的实际状态，必须直接通过element.property = newValue;的方式对其属性进行赋值操作。

理解这一核心概念对于编写健壮且符合预期的JavaScript代码，尤其是在进行DOM操作时至关重要。

到这里，我们也就讲完了《JS原始值赋值对DOM影响及输入框限制技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！