Question

谷歌浏览器（我使用63.0.3239.132版本）是否有可能使textarea无法选择（只有内部文本无法选择）？在Edge，Explorer和Firefox中，此代码可用，但不适用于Chrome。

是否还要添加其他样式属性？

由于

＆＃13;

<!DOCTYPE html>

<html>
    
<head>
    <style>
        .mytextarea
        {
            cursor: default;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-user-select: none;
        }
    </style>

</head>

<body>

    <textarea  id="objLog" class="mytextarea" disabled="disabled" readonly style="background-color: #FFFFFF; width:400px; height:100px;">
Test Test Test Test Test Test
Test Test Test Test Test Test
    </textarea>

</body>

</html>

＆＃13;

Answer 1

试试这个。由此用户无法选择任何文字。

＆＃13;

<!DOCTYPE html><html>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        .mytextarea{
            cursor: default;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
            background: #fff;
            width:400px;
            height:100px;
        }
        ::selection {
            color: #000; 
            background: #fff;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#objLog').bind("select",function(e) {
                e.preventDefault();
                $(this).text($(this).text());
                return false;
            });
        });
    </script>
</head>
<body>
    <textarea 
        class="mytextarea"
        id="objLog" 
        onselect="return false;" 
        readonly="readonly"
        unselectable="on"
        disabled="disabled">Test Test Test Test Test Test Test Test Test Test Test Test</textarea>
</body>
</html>

＆＃13;

Answer 2

如果你想要的话，你可以用一个包装div来点缀它，而不是这样的jQuery：

document.querySelector("#toggle").addEventListener('click', () => {
	
  document.querySelector('.wrapper').classList.toggle("disabled");

});

.wrapper {
  height: 100px;
  width: 400px;
}

.disabled .mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 390px;
  z-index: 10;
}

.disabled .mytextarea {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1px;
  z-index: 0;
}
        
.mask {
   z-index:0;
}
  
.mytextarea {
    z-index: 10;
}

<div class="wrapper disabled">
  <div class="mask">

  </div>

  <textarea  id="objLog" class="mytextarea"  readonly style="background-color: #FFFFFF;height:92px;width: 394px; resize: none;">
    Test Test Test Test Test Test
    Test Test Test Test Test Test
    Test Test Test Test Test Test
    Test Test Test Test Test Test
    Test Test Test Test Test Test
    Test Test Test Test Test Test
    Test Test Test Test Test Test
    Test Test Test Test Test Test
    Test Test Test Test Test Test
    Test Test Test Test Test Test
    Test Test Test Test Test Test
    Test Test Test Test Test Test
    Test Test Test Test Test Test
    Test Test Test Test Test Test
  </textarea>
</div>

<button id="toggle" style="margin-top: 40px;">
toggle
</button>

Answer 3

这也应该有用

.mytextarea::selection {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<textarea class="mytextarea" oncontextmenu="return false" readonly=”readonly” 
style="background-color: #FFFFFF; width:400px; height:100px;color:grey">
    Test Test Test Test Test Test
        Test Test Test Test Test Test
        Test Test Test Test Test Test
        Test Test Test Test Test Test
        Test Test Test Test Test Test
        Test Test Test Test Test Test
        Test Test Test Test Test Test
        Test Test Test Test Test Test
        Test Test Test Test Test Test
        Test Test Test Test Test Test
        Test Test Test Test Test Test
        Test Test Test Test Test Test
        Test Test Test Test Test Test
        Test Test Test Test Test Test
        </textarea>

Textarea无法在Chrome中选择

3 个答案: