如何解决Safari中input,textarea无法输入的问题

在HTML中部分input和textarea是用于输入的控件,这应该是最基础最简单的东西了,直到有一天测试说那谁,input框怎么没办法输入?what???什么鬼

一番测试下来发现,chrome ok,IE ok, Firefox ok, Safari挂了???人生有太多的大起大落,但是作为一个入行5年+的攻城狮敲破脑袋也想不到在最简单的东西上翻了船,既然出了问题,就得解决问题,不得不说看似越简单的问题实际越不好解决,经过不断不断的探究,最终发现问题出在一个样式上,输入控件继承到了不知道哪一个父级上设置的user-select: none,user-select用于设置某些文字是不是能被选中,其使用方法:

user-select: none|auto|text|contain|all;
 
/*firefox浏览器*/
-moz-user-select: none|text|all;
 
/*safari、chrome浏览器*/
-webkit-user-select: none|text|all; /*Safari中不支持该属性值,只能使用none或者text,或者是在html的标签属性中使用*/
 
/*ie浏览器*/
-ms-user-select: none|text|element;
 
属性值:
none:  元素和子元素的文本将无法被选中

text:  文本可以被选中

auto:  文本将根据浏览器的默认属性进行选择

all:  当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素

contain、element :  可以选择文本,但选择范围受元素边界的约束,也就是选择的文本将包含在该元素的范围内。只支持Internet Explorer

发现了问题所在,解决问题就好说了我们只需要全局设置以下样式就可以解决。

input, textarea {
  user-select: text;
}

  • 支付宝二维码 支付宝
  • 微信二维码 微信

本文地址: /safari-input-textarea-bug.html

版权声明: 本文为原创文章,版权归 逐梦个人博客 所有,欢迎分享本文,转载请保留出处!

相关文章