input的兼容问题

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-07-03

input输入框光标高度问题

IE：不管该行有没有文字，光标高度与font-size大小一致

FF：该行没有文字时，光标大小与input的 height 大小一致；该行有文字时，光标大小与font-size大小一致

chrome：有2种情况：

  • 设置了line-height 该行没有文字时，光标大小与input的 line-height 大小一致; 该行有文字时，光标大小从input顶部到文字底部

  • 没有设置line-height 光标大小与font-size一样

所以，input在使用的时候，最好不要设line-height, 可以设定一个较小的height, 然后用 padding 来撑开，这样基本上可以解决所有浏览器的问题

ios键盘收起后的底部留白问题

场景：输入框输入信息时，如登录、注册等表单信息

问题：键盘收回后页面底部留白，导致dialog组件按钮位移，视觉上，其中的按钮无法正常工作

解决方案：监听失去焦点时，让页面滚动到顶部

<input 
  class="input" 
  placeholder="输入手机号" 
  max="11" min="11" 
  maxlength="11" 
  v-model="mobile" 
  @blur="blurIn"
/>

blurIn() {
  window.scroll(0, 0);
}