最近经常在群里看到诸如以下这些问题:
Enter
键提交表单呢? 针对这些问题分享下我对使用表单的一些建议。
<ul> <li> <span>用户名:</span> <input type="text" name="username"> </li> <li> <span>密码:</span> <input type="password" name="password"> </li> <li> <span>搜索词:</span> <input type="text" name="key"> </li> <li> <span>手机号:</span> <input type="text" name="tel"> </li> <li> <span>年龄:</span> <input type="text" name="age"> </li> <li> <span>自我介绍:</span> <textarea name="content"></textarea> </li> <li style="padding-left: 70px"> <input type="button" value="保存" id="J-save"> </li> </ul> <script> $("#J-save").on("click", function () { // 验证信息 // 异步 or 同步提交 alert("保存中"); }); </script>
以上代码是常见的表单元素的结构,一般是绑定 提交
按钮的 click
事件,然后处理验证用户输入的信息,符合条件后用 ajax
异步或者某种方式跳转。
也有些fe会套一层 form
标签,但还是绑定的 click
事件。
针对以上的表单元素优化点如下:
只要是表单元素始终在元素外层包裹 form
标签,说好的我们一起手拉手语义化呢?
不单独的对【提交】按钮绑定 click
事件,对整个表单绑定 submit
提交事件,这样可以让整个表单内的文本框获得 Enter
提交的VIP待遇,并且在移动端中可以让文本框聚焦时键盘的右下角是【前往】。
再加上对表单里元素值的验证+聚焦,可以达到【输入->回车->错误->输入->回车->提交】一气呵成的体验。
这个可以解决上面的问题1、问题3
input
元素的 type
属性决定着她的 功能
,应该根据自己的业务场景合理的使用她。
类型 | 说明 | ios | android | 备注 |
---|---|---|---|---|
password | 密码框 | - | - | 在有密码需求时使用,在某些系统下(如ios)会调起系统内置键盘,更加安全 |
tel | 电话框 | 直接调出系统默认的数字键盘 | 调起数字键盘 |
如果期望输入是数字类型,可以优化考虑该属性 解决上面的问题2 |
number | 数字框 |
调起输入法的数字键盘 如果没装输入法,会调起系统的全数字键盘(不是线数字) |
调起数字键盘 | 优先考虑使用tel |
search | 搜索框 | - | - |
在移动端中使用该属性可以使键盘右下角变身成【搜索】按钮,么么哒。 解决上面的问题4 |
邮箱 | - | - |
会调起字母键盘,并且有 @
符号 |
|
url | 网址 | - | - | 会调起字母键盘,更适合输入域名网址 |
当然还有一些 date
、 time
等,但要考虑到兼容性,也视项目情况而定。
合理的使用 placeholder
占位,但要考虑兼容性。兼容方案:
value
模拟需要注意提交时判断 value
是否是默认占位的值,比较坑 span
标签定位显示,需要考虑到直接设置元素值时的触发情况 如果已知元素理想的输入长度,不妨设置下元素的最大长度属性,并且兼容性很好哦。从一定程度上避免了用户的误输入,从而提升用户体验。
表单元素的描述文字应该使用 label
标签包裹,并且使用 for
属性指向表单元素,从而达到点击描述文字可以聚焦文本框的效果,如:
<li> <label for="J-username">用户名:</label> <input type="text" name="username" id="J-username"> </li>
在文本框聚焦时理论来说应该让用户感知出来,而不是纹丝不动。
聚焦时考虑页面滚动到焦点元素的最佳可视范围。
你还需要考虑在移动端中聚焦时页面老跑偏...
当表单异步提交过程中需要向后端发送数据,可能会经历 提交中、提交出错、提交成功 的状态,还要考虑到提交中再次提交(重复提交)的问题。
比如在提交时设置提交按钮的 disabled = true
,并且使其变灰,显示【提交中...】是不是更友好些呢?手拉手的问题我就不再说了...
form
标签默认阻止 onsubmit="return false"
,js初始化时处理掉 form
添加,也可以在 input
元素添加 fixed
失效