对HTML-input的一些思考和理解
作者:云小梦
原文链接: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(放在提交按钮上)
最后
- 欢迎关注「前端Q」,认真学前端,做个专业的技术人...
- Facebook推出用于android数据加密的开源API
- Android 表单验证框架:AValidations
- 推荐系统介绍
- Android WebView 上传文件支持全解析
- 网站管理软件 – AspxSpy2014 Final
- 特性分支与特性开关哪家强?
- Android快速开发框架 roboguice
- 悄悄的干活,打枪的不要!勒索+比特币挖矿木马
- 拥有可移动头像的折叠Android工具栏:CollapsingAvatarToolbar
- Android平台下的第一个Tor木马
- 利用代码实现自定义圆角+阴影按钮 android-flat-button
- 周末阅读:程序员的《权利法案》
- 对利用Adobe 0day – CVE-2014-0502进行攻击的行为分析
- Android系统更改状态栏字体颜色
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例