maxlength中l大小写的场景

Question

下面是maxlength在不同的场景应用的案例

// html
<input type="text" maxlength="10" id="demo">


// 获取
document.getElementById('demo').maxLength

// 设置
document.getElementById('demo').maxLength=20;

// jQuery

$('#demo').attr('maxlength');
$('#demo').attr('maxlength', 20);

//Native
document.getElementById('demo').setAttribute('maxlength', 20);

问题一

总结类似于maxlength这种存在不同环境大小写不同的其他属性

问题二

我对于maxlength应用场景总结是在js中用大写L其他直接操作html标签属性的用小写l不知道这个总结是否有问题，或者请表达自己的总结观点

问题三

扩展React

<FInput
   labelWidth={LABEL_W}
   label="手机号码"
   placeholder="请输入手机号码"
   value={relaMobile&&relaMobile.replace(/[^\d]/g,'')}
   maxLength = {11}
/>

上面为什么用大写L， 为什么用{}包着常量，直接等于不行吗？

Answer 1

问题的关键在于 html 标签及属性名是大小写不敏感的，所以理论上

<input type="text" maxlength="10" id="demo">

和

<INPUT TYPE="text" MAXLENGTH="10" ID="demo">

是没有差别的。

而 JavaScript 则是大小写敏感的，所以 DOM attributes 会使用驼峰形式，JSX 本质上是 JavaScript，所以也是大小写敏感的。