H5案例分享:点击a标签不跳转以及会调出手机键盘的解决办法

2017-03-17 H5案例分享 H5案例分享

 

点击a标签不跳转以及会调出手机键盘的解决办法 

   小五曾遇到这样一个BUG,点击a标签,在安卓下,a标签链接不跳转,在iOS下会调起手机键盘。

   其中安卓下点击a标签不跳转的解决办法,是不用href做跳转的链接,改为用JS控制跳转。

<a href="javascript:;" ontouchstart="window.location.href='/'">
   <img src="xxx">
</a>

   这样写虽然解决了安卓下点击a标签不跳转的问题,但还是没有解决点击a标签,在ios手机上会调出手机键盘的行为,不过将a标签换成div,就可以做到在iOS下不会再调出手机键盘了。

<div ontouchstart="window.location.href='/'">
   <img src="xxx">
</div>
 

   后面经小五查证,原来是因为在a标签中设置了-webkit-user-modify:read-write-plaintext-only;属性,导致点击a标签出现异常。

user-modify属性,用来控制用户能否对页面文本进行编辑。-webkit-user-modify: read-only | read-write | write-only | read-write-plaintext-only

read-only

内容只可读。

read-write

内容可读写。

write-only

内容只可写。

read-write-plaintext-only

内容可读写,但粘贴内容中的富文本格式(如文本的颜色、大小,图片等)会丢失。内容类似于以纯文本显示。

/*只能读*/
.read-only {
-webkit-user-modify:read-only;
-moz-user-modify:read-only;
user-modify:read-only;
}
/*可读可写,支持富文本*/
.read-write {
-webkit-user-modify: read-write;
-moz-user-modify: read-write;
user-modify: read-write;
}
/*只可写,几乎没有浏览器支持*/
.write-only {
-webkit-user-modify: write-only;
-moz-user-modify: write-only;
user-modify: write-only;
}
/*纯文本*/
.read-write-plaintext-only {
-webkit-user-modify: read-write-plaintext-only;
-moz- user-modify: read-write-plaintext-only;
user-modify: read-write-plaintext-only;
} 

   适用于高级浏览器中和移动端。

 


以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

H5案例分享:微信二维码长按无法识别问题解析

H5案例分享:微信视频播放全屏问题

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~


阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~