作者:云小梦
原文链接:https://yunxiaomeng.blog.csdn.net/article/details/107575226
背景
前两天在写原生上传文件时用到了input的 type="file"
按钮,写完以后就感觉别扭的一批:这玩意自己的样式实在难看,但是它又不支持自定义样式。最后“灵光一现”,想到:可以设置其透明度为 opacity: 0;
然后拿其他的标签覆盖上去:比如 input type="text"
、比如 div
、比如 label
。。。
项目地址:http://htmlpreview.github.io/?https://github.com/1314mxc/compress/blob/master/index.html
(这个工具中的所有“上传框”皆是input) 最近正好在搞这个“图片上传”、“压缩”的事情:H5以后,input就支持了accept —— 选择文件类型,还有一些值比如:“multiple
” 可设置“只选择文件夹”。
这两个问题也造就了这篇文章:
先说下input中的一些问题:
不是所有的 input 都支持“placeholder”,比如:
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 white inset;
}
来去除效果。
★上面这段CSS代码意思为:将边框阴影设为白色,然后向内扩展,覆盖原来应该显示的“黄色”。
”
HTML5约束验证
HTML5对于input增加了很多标签属性,和事件。其中最著名的莫过于“表单验证validate”了:当你获取到validitestate对象(通过DOM.validity
)后,这里面有几个很重要的属性:
willValidate:元素约束是否“被符合”,无则返回false
validity:当前元素验证状态
validationMessage:描述相关约束失败 / 错误信息
checkValidity():有没有满足任一约束(常被用在submit事件中)
setCustomValidity():设置自定义验证提示信息
里面还有许多属性都是和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;
//下面可自定义样式
}
★同样的还有input的button、普通input的边框阴影都可以用类似代码去除!
”
看好了,上面是 -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的基础功能验证。
//HTML部分
<input id="mail" type="email" required placeholder="请输入邮箱" />
<span class="title">邮箱</span>
<label for="mail"></label>
//css部分
input:focus,input:hover{text-indent: 2px;}
input:focus +span.title,input:hover +span.title{transform: translateX(-120%);}
input:valid ~label::after{content: '你输入邮箱正确!';}
input:invalid ~label::after{content: '你输入邮箱错误';}
input:valid{border: 1px solid green;}
input:invalid{border: 1px solid red;}
甚至是用伪类 optional 、required 设置“选填”和“必填”的简单样式:
input:required +label::after{content:'(必填)';}
input:optional +label::after{content:'(选填)';}
input:required:focus{box-shadow: 0 0 3px 1px #aa0088;}
input:optional:focus{box-shadow: 0 0 3px 1px #999;}
你甚至可以在input中加入0级DOM事件oninvalid,在其中直接调用 this.setCustomValidity("...")
来作为填错时提示。这很方便。
做完这些,你很满意。但是你的UI设计师可能要发火了 —— 不同的提示框UI实在是太... 我们需要自定义提示气泡!
阻止自带默认气泡:
function stopBubble(form){
form.addEventListener("invalid",function(e){
e.preventDefault()
},true)
//submit事件中监听:如果提交时验证不通过
form.addEventListener("submit",function(e){
if(!this.checkValidity()){
e.preventDefault()
}
},true)
}
自定义气泡、JS生成DOM、插入(appendChild)与input同级、并触发focus(
xxx.focus()
)
扩展Tip:
如何设置了验证(required/pattern/...)但不让浏览器去验证?
两个HTML属性:novalidate(放在input上) / formnovalidate(放在提交按钮上)
最后
欢迎加我微信(winty230),拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...
点个在看支持我吧