移动端-webkit-user-select:none导致input/textarea输入框无法输入

最近在做一个h5推广页面,修修改改,总是有很多的小问题,还是归于自己不细心,还有一点就是有一些css3的属性不太熟悉。跟后端程序猿对接的时候,导致各种打包?。挺不好的。
所以以后改东西,改完要认真仔细的过一遍。再跟人家说要发包。

//错误版
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    // 后面的几行是新加的
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -webkit-appearance: none;
    outline: none;
}
//正确版
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    outline: none;
}
*:not(input,textarea) { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
}

-webkit-tap-highlight-color

这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。
该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。

-webkit-touch-callout

当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

user-select

(1) 语法
user-select:none | text | all | element
默认值:text
适用范围:除替换元素外的所有元素
(2) 取值说明
none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素,那么被选择的部分将是以该子元素 向上回溯的最高祖先元素。
Element:可以选择文本,但选择范围受元素边界的约束

-webkit-appearance

ios系统input默认灰色的背景;

另外:触屏是没有鼠标的,只有触摸事件,所以要模仿pc端hover事件,移动端可以用:active 来代替,但是会有一些bug 所以要加上一段js
document.body.addEventListener(‘touchstart’, function () { });

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值