前两天在写原生上传文件时用到了input的 type="file" 按钮，写完以后就感觉别扭的一批：这玩意自己的样式实在难看，但是它又不支持自定义样式。最后“灵光一现”，想到：可以设置其透明度为 opacity: 0; 然后拿其他的标签覆盖上去：比如 input type="text" 、比如 div、比如 label 。。。
：
最近正好在搞这个“图片上传”、“压缩”的事情：H5以后，input就支持了accept —— 选择文件类型，还有一些值比如：“multiple” 可设置“只选择文件夹”。
这两个问题也造就了这篇文章：
先说下input中的一些问题：
我要评论type="date" 。尝试了一下，虽然H5原生的date功能强大，但对placeholder还真没有什么解决方案。不过，参照本文开篇的思路，我们同样可以先写一个 type="text" ，然后用0级DOM事件 onfocus （在触焦时）将其变为date：onfocus="(this.type='date')" 。这种方法在PC端简直完美，但在一些手机上需要【点击两次】才有效 —— 猜测可能还是移动端响应click的问题。
所以还有一种方案：在input上覆盖一个div，当点击时去操控 input 的事件和响应！
我们都知道，在input中，当输入过一次时，下一次输入会有提示 —— autocomplete 。但这也会带来一些效果：input 将背景“自动”变为黄色。
哦，这可不是什么bug。是 input 对 paste 的响应样式罢了。我们可以用“autocomplate='off'” / 伪类：
input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px #2390cc inset;
}
来去除效果。
上面这段CSS代码意思为：将边框阴影设为白色，然后向内扩展，覆盖原来应该显示的“黄色”。
HTML5对于input增加了很多标签属性，和事件。其中最著名的莫过于“表单验证validate”了：
当你获取到validitestate对象（通过DOM.validity）后，这里面有几个很重要的属性：
里面还有许多属性都是和input中的属性（字段）一一对应的：
| validitestate对象属性 | input属性字段 |
|---|---|
| valueMissing | required（设置非空） |
| typeMismatch | type |
| patternMismatch | pattern |
| tooLong | maxlength |
| step | 用于type="number"中，可指定“数字精确规范”：如step=“0.01”，则最后可获取到两位小数（否则number默认只能获取整数值） |
input还有一个比较“特别”的：search。这种类型的input，在输入时右侧会有一个“带圆圈的×”，那么肯定会有人觉得不想要 or 不好看了，我们也可以用伪元素来将其去掉：
input[type="search"]::-webkit-search-cancel-button{
-webkit-appearence: none;
//下面可自定义样式
}
看好了，上面是 -webkit前缀！几乎不用想，在手机上一定会出现一些“似乎莫名其妙的问题”：比较推荐的是，用div+absolute来重新写一个“小叉号”，用JS控制对应事件。
这里“比较推荐”是“在解决问题的办法”中比较而得。事实上，还是推荐用原生的“取消按钮”。
哦对了，既然有了maxlength，为什么W3C还保留了max？
因为在 type=“number” 中，maxlength是没啥用的。。。（就很尴尬） 更尴尬的是：max只能控制“上限值” —— 比如只能输入5位，则写为：max="99999" ，而且他的效果还是体现到“获取到的值”上。这也就是说：你在没有任何提示下，在你眼睛所能看到的input里，你可以输入无限长度。
input的高度可以用height或者padding来改变 —— 事实上，几乎所有的行内（非替换）元素都是用padding改变高度的（行内替换元素可以设置height）
其实说了这么多，HTML+CSS就可以完成简单的“表单校验”：
伪类“:valid”、“:invalid”直接作用到对应input上即可 —— 基于pattern + required的基础功能验证。
你甚至可以在input中加入0级DOM事件oninvalid，在其中直接调用 this.setCustomValidity("...") 来作为填错时提示。这很方便。
做完这些，你很满意。但是你的UI设计师可能要发火了 —— 不同的提示框UI实在是太…
我们需要自定义提示气泡！
function stopBubble(form){
form.addEventListener("invalid",function(e){
e.preventDefault()
})
//submit事件中监听：如果提交时验证不通过
form.addEventListener("submit",function(e){
if(!this.checkValidity()){
e.preventDefault()
}
})
}
xxx.focus()）扩展Tip：
如何设置了验证（required/pattern/…）但不让浏览器去验证？
两个HTML属性：novalidate（放在input上） / formnovalidate（放在提交按钮上）
本文地址：https://blog.csdn.net/qq_43624878/article/details/107575226
如对本文有疑问， 点击进行留言回复！！
![[Go] GO语言实战-gin框架项目实现中英文切换](http://www.lhsxpumps.com/_images5/10qianwan/20200728/s_0_202007280956308194.png)
如何给未越狱的ios下载历史版本的app？未越狱IOS系统安装历史版本软件的方法，iPhone未越狱的手机如何安装旧版本APP？
Unity Android playerSetting相关设置
网友评论