创建网页时,您可能会遇到需要添加默认情况下不可选择的标签的情况。这对于您不希望复制或突出显示文本的按钮或导航元素特别有用。
对于支持 CSS3 的现代浏览器,您可以使用以下样式:
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
将此类应用于标签元素:
<label class="unselectable">Unselectable Label</label>
对于较旧的浏览器缺乏 CSS3 支持,您可以使用 JavaScript 来禁用文本选择:
function disableSelection(element) { if (typeof element.onselectstart != 'undefined') { element.onselectstart = function() { return false; }; } else if (typeof element.style.MozUserSelect != 'undefined') { element.style.MozUserSelect = 'none'; } else { element.onmousedown = function() { return false; }; } } disableSelection(document.querySelector("label"));
此 JavaScript 函数迭代页面上的所有标签,并应用适当的事件处理程序来禁用选择。
如果您使用 jQuery,您可以使用以下代码扩展 jQuery 库:
$.fn.disableSelection = function() { this.each(function() { disableSelection(this); }); };
然后,您可以禁用所有标签上的选择,如下所示:
$("label").disableSelection();
以上是如何防止 HTML 标签中的文本选择?的详细内容。更多信息请关注PHP中文网其他相关文章!