HTMLInputElement maxLength默认值-1无效，如何设置合法无报错默认值？

问题本质 #

原生HTMLInputElement的maxLength/minLength返回的默认值-1是只读的状态标识，表示“无长度限制”，但该值不允许主动赋值给属性——规范要求这两个属性的设置值必须是非负整数，所以直接赋值-1会触发IndexSizeError。

可行方案 #

方案1：用undefined作为默认值（推荐，完全对齐原生行为）

组件属性的默认值设为undefined，在API映射时做逻辑判断：

• 当值为undefined或负数时，不主动设置内部input的对应属性，让原生input自然保持“无限制”状态（此时读取maxLength仍会返回-1，完全符合原生API）
• 当值为非负整数时，正常赋值

示例代码：

// 自定义Web组件内部逻辑
class CustomInput extends HTMLElement {
  static get properties() {
    return {
      maxLength: { type: Number, default: undefined },
      minLength: { type: Number, default: undefined }
    };
  }

  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this._internalInput = document.createElement('input');
    this.shadowRoot.appendChild(this._internalInput);
    this._syncProperties();
  }

  _syncProperties() {
    // 处理maxLength
    if (this.maxLength !== undefined && this.maxLength >= 0) {
      this._internalInput.maxLength = this.maxLength;
    } else {
      // 不设置属性，保持原生无限制状态
      delete this._internalInput.maxLength;
    }

    // 处理minLength
    if (this.minLength !== undefined && this.minLength >= 0) {
      this._internalInput.minLength = this.minLength;
    } else {
      delete this._internalInput.minLength;
    }
  }

  // 重写getter，返回原生input的实际值（无限制时返回-1）
  get maxLength() {
    return this._internalInput?.maxLength ?? -1;
  }

  get minLength() {
    return this._internalInput?.minLength ?? -1;
  }
}

方案2：用超大合法数值作为默认值（适合必须设置数值属性的场景）

如果Storybook要求必须设置一个数值类型的默认值，可以用Number.MAX_SAFE_INTEGER作为maxLength的默认值——该值远大于浏览器允许的最大输入长度限制（一般为524288），实际效果等同于“无限制”，且是合法的非负整数，不会触发报错。

示例代码：

static get properties() {
  return {
    maxLength: { type: Number, default: Number.MAX_SAFE_INTEGER },
    minLength: { type: Number, default: 0 } // minLength设为0等同于无最小限制
  };
}

// 映射时直接赋值即可，无需额外判断
connectedCallback() {
  this._internalInput = this.shadowRoot.querySelector('input');
  this._internalInput.maxLength = this.maxLength;
  this._internalInput.minLength = this.minLength;
}

注意事项 #

• 方案1能完全对齐原生input的API行为（包括返回-1的只读状态），适合需要严格兼容原生组件的场景
• 方案2更简单，但读取maxLength时会返回Number.MAX_SAFE_INTEGER而非-1，如果你的组件需要严格遵循原生API的返回值，优先选方案1
• minLength的处理逻辑和maxLength完全一致，唯一区别是minLength的合法值为≥0，设为0时等同于无最小限制

内容的提问来源于stack exchange，提问作者connexo