关于 form 表单你应该知道的

input 获取焦点时高亮问题

input,
textarea {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

去除 ios 下 input 椭圆形

input,
textarea {
    -webkit-appearance: none;
}

更改 input 类型,让用户无需切换键盘,轻松完成输入

HTML5 引入了大量新的输入类型。这些新输入类型可以提示浏览器,屏幕键盘应显示什么类型的键盘布局。用户无需切换键盘,就能更轻松地输入所需信息,并且只看到该输入类型的相应按键。

【type=url】:用于输入网址。其开头必须是有效的 URI 架构,例如 http://、 ftp:// 或 mailto:。

【type=tel】:用于输入电话号码。它不 执行特定的验证语法,因此,如果要确保特定的格式,可以使用模式属性。

【type=email】:用于输入电子邮件地址,并提示键盘上应默认显示 @。 如果需要用户提供多个电子邮件地址,则可以添加 multiple 属性。

【type=search】:一个文本输入字段,其样式与平台的搜索字段一致。

统一平台search表现形式

input[type="search"]::-webkit-search-cancel-button {
    display: none; // 隐藏默认x
}

【type=number】:用于数字输入,可以是任意合理的整数或浮点值。在安卓是可以唤醒数字键盘,但是在 ISO 却不能。需要加上pattern="\d*";如果想简单的唤醒数字键盘我们可以直接设置 type=tel 在 ISO 和安卓下面都能唤醒数字键盘(这里的数字键盘是拨号键没有 . )。

对于type=number 类型通常css除去小箭头样式

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input 输入光标问题

1、在做移动端开发的时候有时为了页面整体布局我们需要将 input 设计的比较高;如果我按照一般思维都是将 input 输入框给定 line-hiegt,height 让它达到设计要求,在安卓手机上是没有什么问题;但是到了 ISO 浏览器中会发现光标变的很长。

分析各个浏览器表现形式:

IE:不管该行有没有文字,光标高度与 font-size 一致。

FF:该行无文字时,光标高度与 input 的 height 一致。该行有文字时,光标高度与 font-size 一致。(最新版的好像和 ie 一样了)

Chrome:该行无文字时,光标高度与 line-height 一致;该行有文字时,光标高度从 input 顶部到文字底部(这两种情况都是在有设定 line-height 的时候),如果没有 line-height,则是与 font-size 一致。 解决方案:

给 input 的 height设定一个较小的高度,然后用padding去填充,基本上可以解决所有浏览器的问题

input {
    height: 16px;
    padding: 4px 0px;
    font-size: 12px;
}

// 只给IE line-height就可以了。
input {
    -ms-line-height: 40px;
}

2、在 fixed 定位的弹出框中的 input 光标会在 iso 等一些手机发生如下图的错位现象。

解决方案1:

在弹出框出现时动态添加 dialog-show,消失时移除dialog-show。

dialog-show:{ position: fixed; width: 100%;}

解决方案2:

因为手机对fixed的兼容性不是很好;尽量将 fixed 布局的元素都用 absolute 代替。

input输入框的自动填充问题和历史记录问题

问题描述:如果是同域名网站,并且曾经在该网站下登录过账号密码,并且选择了记住账号密码,或者在设置中设置了自动填充设置。chrome浏览器会对账号密码进行自动填充功能,或者以下拉历史记录的形式给到我们。虽然这个功能给我们带来一些方便但是有些情况下我们并不需要这些功能。

浏览器填充机制:反复测试后发现浏览器自动填充机制是满足:页面里有一个 type=password 的 input 且这个 input 前面有一个type=text的input的时候就会进行自动填充。

firefox和360浏览器的处理方式是:只要检测到页面里有满足填充机制的,不管是不是 display:none 的,只要检测到就直接往里填充。而且是有几个符合条件的就填充几个。

而chrome 54版本略有不同:满足上面的条件且页面里只有一个 type=password 的 input。才会自动给第一个type=text 的input填充账号,给 type=password 的input填充密码。所以chrome 54版本不存在注册页面自动填充的问题。 Google 出来的方法是修改 input 的 type , 页面里input都写成type=text , 等获得焦点的时候给改成type=password。下意识去搜了下 IE 下修改type,发现 IE 下 type 是个只读属性,修改 type 的方法并不能兼容IE。

解决方案1:设置隐藏输入框,添加autocomplete

<form autocomplete='off'>
<input type="text"  style='display:none' />
<input type="password"  style='display:none' /> 
<input type="text" />
<input type="password" name="password" autocomplete="new-password" /> 
</form>

解析:html5 为 input 标签提供了autocomplete属性;值为on/off;用来禁止input标签是否填充但是 chrome 浏览器中却不能生效。chrome 浏览器通常会读取第一个type="password"的input对其进行填充。对于360浏览器好像又不适应所以我们可以通过设置autocomplete="new-password"来实现不填充的效果(网易就是添加了autocomplete)。

解决方案2:动态修改type类型 通过测试发现chrome对type="text"类型的输入框不会进行填充;只会碰到type='password'才填充。那么我们就可通过动态改变type类型就可以实现密码不自动回填,我们携程支付页就是通过 input 获取焦点后改变 type 为 password。

问题的延伸:在使用虚拟键盘和很小的设备时,为用户节省时间时,减少潜在的输入错误,我需要根据用户之前指定的数据来确定可以自动填充哪些字段。填充的具体字段怎么控制呢?如何做到只填充我们想要填充的input?

【注意】Chrome 需要将 input 元素包含在 form 标记中才能启用自动完成。如果它们不包含在form标签中,Chrome 将提供建议值,但是不会完成表单填充。

答:你可以为每个输入元素提供 name 属性和 autocomplete 属性来提示浏览器。我们可以修改autoComplete为非建议属性值即可阻止其自动填充。

<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Full name" autocomplete="name">

<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="name@example.com" autocomplete="email">

// 将autocomplete 填充为非建议属性就可防止填充
<label for="nameCC">Name on card</label>
<input type="text" name="ccname" id="nameCC"   autocomplete="cc-name" class="dirty">

建议的输入 name 和 autocomplete 属性值(如下表)

内容类型 name 属性 autocomplete 属性
名称 name fname mname lname name(全名)given-name(名字)additional-name(中间名)family-name(姓氏)
电话 phone mobile country-code area-code exchange suffix ext tel
电子邮件 email email
密码 password current-password(用于登录表单)new-password(用于注册和更改密码表单)

输入框自动填充后怎么除去黄色背景

input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset;
    border: 1px solid #CCC!important;
}

注意:chrome 默认定义的 background-color,background-image,color不能用!important提升其优先级以外,其他的属性均可使用!important提升其优先级。

对细节更多了解可访问:创建出色的表单

From: https://juejin.im/entry/5b593341f265da0f7d4f037b

评论