前端开发 | 在线支持

Webkit内核的浏览器拥有一些特殊的属性，有些属性并不常用也并不为人所知。有些时候需要禁用某些Webkit内核的私有属性，这在移动开发中会非常有用。

禁用电话号码转换为链接样式(移动设备)。iOS系统浏览器会把纯文字转换为链接样式，当点击时与默认的系统拨号相连，但开发者并不希望这样，这种情况需要在head中添加如下代码:<meta name="format-detection" content="telephone=no">

禁用原生弹出菜单(移动设备)。在移动设备上，如果用户长按a标签，将会弹出浏览器的原生菜单，添加如下的CSS：body {-webkit-touch-callout: none;}。

禁用原生弹出菜单(移动设备)。在移动设备上，如果用户长按a标签，将会弹出浏览器的原生菜单，添加如下的CSS：body {-webkit-touch-callout: none;}。JS方法：document.documentElement.style.webkitTouchCallout = 'none';

【示例】

HTML

<p>document.documentElement.style.webkitTouchCallout = 'none';</p>
<p>document.documentElement.style.webkitUserSelect  = 'none'; </p>
<p>没有禁用外边框的文本框 <br />
    <input type="text" />
</p>
<p>禁用了外边框的文本框 <br />
    <input type="text" id="in2"/>
</p>

CSS

body {
    /*	禁用webkit高亮*/
    -webkit-touch-callout: none;/*禁用移动设备原生的弹出菜单*/
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;/*禁用选中*/
}
#in2 {
    outline: none;
}
input {
    border-radius: 20px;
    border: 1px solid #ccc;
}
textarea {
    outline: none;/*禁用轮廓线*/
}
textarea {
    resize: none;/*禁用缩放*/
}

下载源代码