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&nbsp;type="text"&nbsp;maxlength="10"&nbsp;id="demo">和<INPUT&nbsp;TYPE="text"&nbsp;MAXLENGTH="10"&nbsp;ID="demo">是没有差别的。而 JavaScript 则是大小写敏感的，所以 DOM attributes 会使用驼峰形式，JSX 本质上是 JavaScript，所以也是大小写敏感的。