欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-28 16:05:56
前两天在写原生上传文件时用到了input的 type="file" 按钮,写完以后就感觉别扭的一批:这玩意自己的样式实在难看,但是它又不支持自定义样式。最后“灵光一现”,想到:可以设置其透明度为 opacity: 0; 然后拿其他的标签覆盖上去:比如 input type="text" 、比如 div、比如 label 。。。最近正好在搞这个“图片上传”、“压缩”的事情:H5以后,input就支持了accept —— 选择文件类型,还有一些值比如......

前两天在写原生上传文件时用到了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(放在提交按钮上)

本文地址:https://blog.csdn.net/qq_43624878/article/details/107575226