点击a标签不跳转以及会调出手机键盘的解决办法
2021-10-21 10:40:00
前端同学在开发中经常遇到这样一个BUG，点击a标签，在安卓下，a标签链接不跳转，在iOS下会调起手机键盘。
其中安卓下点击a标签不跳转的解决办法，是不用href做跳转的链接，改为用JS控制跳转。
这样写虽然解决了安卓下点击a标签不跳转的问题，但还是没有解决点击a标签，在ios手机上会调出手机键盘的行为，不过将a标签换成div，就可以做到在iOS下不会再调出手机键盘了。
后面经小五查证，原来是因为在a标签中设置了-webkit-user-modify:read-write-plaintext-only;属性，导致点击a标签出现异常。
user-modify属性，用来控制用户能否对页面文本进行编辑。-webkit-user-modify: read-only | read-write | write-only | read-write-plaintext-only
适用于高级浏览器中和移动端。
其中安卓下点击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;
}
适用于高级浏览器中和移动端。
京公网安备 11011402012991号