因为开发需要，以前找过老半天的页面input限定输入数值的方法。一般都用正则表达式判断输入后的字符串是否符合数值的规范。JS的输入内容的校验，很久很久以前就采用过这种方法，但关闭输入法的控制很难。

    ……，时光如梭，转眼早已Web3.0时代。所以，带大家看看日期选择的原生浏览器input控件、数值输入的原生input控制控件等等控件：

<input type="text" placeholder="文本">

<input type="password" placeholder="密码">

<input type="search" placeholder="搜索">

<input type="tel" placeholder="电话">

<input type="url" placeholder="URL">

<input type="email" placeholder="电子邮件">

<input type="number" placeholder="数字" min="1" max="10" step="0.01">

    去掉spin的方法：
<input type="number" class="no-spin" placeholder="数字" min="1" max="10">
.no-spin{
    -moz-appearance:textfield;/*火狐下的移除spin*/
}
.no-spin::-webkit-inner-spin-button,.no-spin::-webkit-outer-spin-button{
    -webkit-appearance: none!important;/*Chrome、Edge下的移除spin*/
}


<input type="range" min="1" max="10">

<input type="date">

<input type="datetime-local">（firefox支持，但时间部分支持不友好）

<input type="month">（firefox不支持）

<input type="week">（firefox不支持）

<input type="time">（firefox支持，但支持不友好）

<input type="checkbox">

    复选框 <input type="radio" name="group1"> 单选按钮 1 <input type="radio" name="group1"> 单选按钮 2
    复选框  单选按钮 1  单选按钮 2

    单选文件选择，限定png、jpeg和jpg：<input type="file" id="fileChooseInput" accept="image/png, image/jpeg, image/jpg">
    
    单文件上传前判断：上传图片

    单文件上传前判断：<button onclick="alertFileType()">上传图片</button>
<script>
    function alertFileType() {
        const fileChooseInput = document.getElementById('fileChooseInput');
        const files = fileChooseInput.files;
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            console.log('文件名:', file.name);
            console.log('文件大小:', file.size);
            console.log('文件类型:', file.type);
            alert('您选择的文件的文件类型为：'+file.type+"（只判断文件扩展名）");
        }
    }
</script>
<input type="color">

<input type="button" value="按钮">

<input type="submit" value="提交">

<input type="reset" value="重置">

<input type="image" src="../img/website-icon.svg" alt="图片按钮">


蓦然回首，datepicker已是浮云 ~ ~ ~ ~
    ————www.v-signon.com学习者共勉