对HTML-input的一些思考和理解

时间:2020-7-29 作者:admin


前两天在写原生上传文件时用到了input的 type="file" 按钮,写完以后就感觉别扭的一批:这玩意自己的样式实在难看,但是它又不支持自定义样式。最后“灵光一现”,想到:可以设置其透明度为 opacity: 0; 然后拿其他的标签覆盖上去:比如 input type="text" 、比如 div、比如 label 。。。
http://htmlpreview.github.io/?https://github.com/1314mxc/compress/blob/master/index.html

最近正好在搞这个“图片上传”、“压缩”的事情:H5以后,input就支持了accept —— 选择文件类型,还有一些值比如:“multiple” 可设置“只选择文件夹”。

这两个问题也造就了这篇文章:


先说下input中的一些问题:

  1. 不是所有的 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 #2390cc 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;
	//下面可自定义样式
}

看好了,上面是 -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实在是太…
我们需要自定义提示气泡!

  1. 阻止自带默认气泡:
function stopBubble(form){
	form.addEventListener("invalid",function(e){
		e.preventDefault()
	})
	//submit事件中监听:如果提交时验证不通过
	form.addEventListener("submit",function(e){
		if(!this.checkValidity()){
			e.preventDefault()
		}
	})
}
  1. 自定义气泡、JS生成DOM、插入(appendChild)input同级、并触发focus(xxx.focus()

扩展Tip:
如何设置了验证(required/pattern/…)但不让浏览器去验证?
两个HTML属性:novalidate(放在input上) / formnovalidate(放在提交按钮上)

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。