maxlength与webkit样式冲突：数字输入框maxlength失效问题咨询

二者没有直接冲突，但问题出在你CSS中针对Firefox的-moz-appearance: text-field属性，以及type="number"输入框本身的标准特性限制：

1. 原生number输入框不支持maxlength
   HTML标准里，type="number"的输入框并不支持maxlength属性，它的专属属性是max（最大值）、min（最小值）等。部分浏览器（比如Chrome）会做兼容处理，允许maxlength在number输入框上生效，但这属于非标准的兼容行为，并非所有浏览器都支持。

2. Firefox的CSS导致兼容逻辑失效
   你在:-moz-placeholder中添加的-moz-appearance: text-field，会强制Firefox将number输入框渲染为普通文本框的外观。这一改动会让Firefox放弃对number输入框的特殊兼容处理，包括之前可能支持的maxlength属性，从而导致maxlength失效。而WebKit内核浏览器（Chrome、Safari）的隐藏箭头CSS（::-webkit-inner-spin-button）不会影响这一兼容逻辑，所以在这些浏览器中可能还能正常限制长度，但这本身就是非标准的表现。

可行解决方案 #

方案1：保留number类型，用JS限制输入长度 #

如果需要保留number类型的特性（比如移动端弹出数字键盘），可以通过JavaScript监听输入事件来限制字符长度：

const input = document.getElementById('numberInput');
input.addEventListener('input', () => {
  if (input.value.length > 16) {
    input.value = input.value.slice(0, 16);
  }
});

方案2：改用text类型+inputmode #

如果不需要number类型的数值校验特性，直接将输入框类型改为text，同时添加inputmode="numeric"让移动端弹出数字键盘，这样maxlength就能原生生效，且不需要额外的箭头隐藏CSS（text类型输入框默认没有箭头）：

<input type='text' id='numberInput' maxlength='16' placeholder='Enter a number*' inputmode="numeric">

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