如何在没有输入文本区域的情况下阻止文本选择并选择项目

Posted

技术标签:

【中文标题】如何在没有输入文本区域的情况下阻止文本选择并选择项目【英文标题】:how to block text selection without input textarea and select items 【发布时间】:2011-06-07 00:47:47 【问题描述】:

我实际上有可以在 IE 中运行但不能在其他浏览器中运行的脚本,这里是:

 var omitformtags=["input", "textarea", "select"]
 omitformtags=omitformtags.join("|")
 function disableselect(e)
  if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
   return false
  
 function reEnable()
   return true
  

 if (typeof document.onselectstart!="undefined")
  document.onselectstart=new Function ("return false")
 else
  document.onmousedown=disableselect
  document.onmouseup=reEnable
 
  document.onmousedown=click;
  function click()
 
  if ((event.button==2) || (event.button==3))  alert("Yazı Kopyalayamazsınız!");

 

我需要在其他浏览器中以相同的方式工作,必须有一个现成的脚本,只是在网络中找不到..

【问题讨论】:

那么你的问题是什么意思 我需要在其他浏览器上以相同的方式阻止这不是很明显吗? 【参考方案1】:
<div onmousedown='return false;' onselectstart='return false;'></div>

onmousedown 禁用 Firefox、Safari、Opera、Chrome 和大多数其他网络浏览器的选择,onselectstart 用于 IE。

虽然禁用文本选择和上下文菜单是非常糟糕的风格,但不会阻止专业用户选择您的文本。只需在浏览器中禁用 javascript 即可再次启用选择。

【讨论】:

问题不在于 div,而在于输入。这适用于 div - 对我来说 - 但不适用于输入。有没有办法为输入做到这一点?【参考方案2】:

更新了我的答案以更清楚

浏览器可以禁用使用 css 样式或使用特殊元素属性进行选择。这种方式比较好:

没有脚本支持 不用担心用户禁用脚本并复制她需要的内容 优雅的解决方案

Opera和IE忽略了这样的样式,但是有html元素属性unselectable,拒绝选择。试试下面的页面(我在IE8、FF3.6、Safari5、opera11、Chrome8中测试过):

<html>

<head>

<style>

.unselectable 
    -moz-user-select: none; /* for FireFox */
    -webkit-user-select: none; /* for Chrome and Safari */
    -khtml-user-select: none; /* probably old webkit browsers, but new support it too */
    user-select: none; /* for future CSS3 compliant browsers */


</style>

</head>

<body>

<!-- add unselectable class to deny selecting in FF, Chrome, Safari and CSS3 compliant browsers -->
<!-- add unselectable attribute to deny selecting in Opera and IE -->
<div class="unselectable" unselectable="on">test</div>

</body>

</html>

有关它的更多信息,请访问this page。现在您可以选择最佳选项供您使用/维护。再一次 - 这个解决方案根本不需要 javascript,应该更安全(如果你可以编辑 html\css 页面并且不需要动态。否则你可以尝试通过 javascript 添加 css class\element 属性..)

【讨论】:

多么痛苦。确实应该有一种方式说“允许选择输入和文本区域字段内容,否则不允许选择其他元素”。我不在乎高级用户是否仍然可以使用文本。我关心的是在拖放类型的 UI 中,尤其是我不希望选择非输入元素。看似合理,但不知何故很难实现。 好吧,但是作为 javascript 解决方案,您可以使用 chrome 检查器修改 css 来简单地检查元素检查类“不可选择”并将其删除...作为 javascript 解决方案,这不适用于开发人员和认真的进步用户... :S lol... 问题不在于 div,而在于输入。这适用于 div - 对我来说 - 但不适用于输入。 查看您的链接,输入不支持用户选择。所以这是一个无赖:(

以上是关于如何在没有输入文本区域的情况下阻止文本选择并选择项目的主要内容,如果未能解决你的问题,请参考以下文章

可以在没有持续回流的情况下动态调整高度的文本区域吗?

单击按钮时在剪贴板中复制文本区域的文本

如何在表格中显示文本区域的换行符?

jQuery / JS 获取文本区域的滚动条高度

用于文本区域的 Bootstrap 5 浮动标签与滚动输入重叠

如何防止文本区域中的重复空格