使HTML文本不可选择

30 浏览
0 Comments

使HTML文本不可选择

首先，我在这里找到了一个解决方案如何使HTML文本不可选择
\n但是那并没有解决我的问题（JavaScript版本可以正常工作，但我需要使用HTML和CSS来实现，我不能使用JavaScript），我已经使用了推荐的CSS，但是看看我的演示，从[drag from here]拖动鼠标到[to here]，你会发现文本仍然可以被选择。
\n有没有办法让它真正地不可选择？\n
谢谢

0

3 答案

0 Comments

文章标题：禁止HTML文本选择的原因和解决方法

在网页开发中，有时候我们希望禁止用户选择网页中的文本，以防止用户复制内容或者干扰页面布局。本文将介绍禁止HTML文本选择的原因和解决方法。

在网页中禁止文本选择的原因可能有很多，比如保护网页内容的版权，防止用户复制敏感信息，或者防止用户干扰页面布局。为了实现禁止文本选择的功能，我们可以使用一些技术手段。

一种常见的解决方法是使用JavaScript和jQuery库。下面是一个示例代码：

// Jquery Function to Disable Text Selection
(function($){
  if($.browser.mozilla){
    $.fn.disableTextSelect=function(){
      return this.each(function(){
        $(this).css({"MozUserSelect":"none"})
      })
    };
    $.fn.enableTextSelect=function(){
      return this.each(function(){
        $(this).css({"MozUserSelect":""})
      })
    }
  }else{
    if($.browser.msie){
      $.fn.disableTextSelect=function(){
        return this.each(function(){
          $(this).bind("selectstart.disableTextSelect",function(){
            return false
          })
        })
      };
      $.fn.enableTextSelect=function(){
        return this.each(function(){
          $(this).unbind("selectstart.disableTextSelect")
        })
      }
    }else{
      $.fn.disableTextSelect=function(){
        return this.each(function(){
          $(this).bind("mousedown.disableTextSelect",function(){
            return false
          })
        })
      };
      $.fn.enableTextSelect=function(){
        return this.each(function(){
          $(this).unbind("mousedown.disableTextSelect")
        })
      }
    }
  }
})(jQuery)
// Usage
$(function($) {
  $("body").disableTextSelect();
  $("#code").mouseover(function(){
    $("body").enableTextSelect();
  });
  $("#code").mouseout(function(){  
    if (window.getSelection) {
      if (window.getSelection().empty) {
        window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {
        window.getSelection().removeAllRanges();
      }
    } else if (document.selection) {
      document.selection.empty();
    }
    $("body").disableTextSelect();
  });
});

上述代码使用了jQuery库，通过绑定事件和样式来实现禁止文本选择的功能。具体实现方式是，在需要禁止文本选择的元素上调用disableTextSelect()方法，然后在鼠标移动到该元素上时，调用enableTextSelect()方法以允许文本选择。

另一种解决方法是使用HTML的unselectable属性。下面是一个示例代码：

<html>
  <head>
    <title>Unselectable Text</title>
    <style type="text/css">
      [unselectable=on] { -moz-user-select: none; -khtml-user-select: none; user-select: none; }
    </style>
  </head>
  <body id="doc">
    <p unselectable="on">For example, the text in this paragraph cannot be selected.</p>
  </body>
</html>

上述代码使用了HTML的unselectable属性，将其赋值为"on"即可禁止该元素的文本选择。通过在需要禁止文本选择的元素上添加unselectable="on"属性，可以实现禁止文本选择的效果。

以上就是禁止HTML文本选择的原因和解决方法的介绍。通过使用JavaScript和jQuery库，或者使用HTML的unselectable属性，我们可以实现禁止文本选择的功能，保护网页内容的版权和页面布局的完整性。

0
0 Comments

问题的出现原因：用户在查看网页时，希望防止选择文本。但是，直接设置文本的属性为不可选择（unselectable）可能会导致其他问题，如链接无法点击等。

解决方法：通过设置一个遮罩（mask）来实现文本不可选择的效果。具体实现方式如下：


  This is my text! My text is mine and no one Else's!
  




.wrapTxt {
  position: relative;
}
.wrapTxt .mask {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

原理很简单，使用一个块级元素（mask）覆盖在文本上方，占据整个文本包裹器的空间。

然而，这种方法的缺点是如果需要一行可选择，下一行不可选择，实现起来比较困难。而且，不可选择文本上的链接也将无法点击。

最后需要注意的是，用户始终可以通过查看源代码或从页面顶部向底部拖动鼠标来绕过此设置。

0
0 Comments

让HTML文本不可选择的问题是由于用户希望禁止用户选择文本而引起的。解决方法可以通过使用CSS、行为文件或JavaScript来实现。

首先，可以使用CSS来实现。以下是使用CSS的示例代码：

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;
}

对于较旧的IE版本，处理起来通常比较困难，但可以使用一个行为文件来解决。以下是使用行为文件的示例代码：

.unselectable {
   behavior: url(ieUserSelectFix.htc);
}

同时需要创建一个名为"ieUserSelectFix.htc"的行为文件，文件内容如下：

另外，也可以使用JavaScript来实现。以下是使用JavaScript的示例代码：

yourElement.onselectstart = function() { return(false); };

通过使用以上三种方法之一，可以实现让HTML文本不可选择的效果。

0