在 Chrome 中无法选择文本区域

Question

是否可以在谷歌浏览器（我使用的是 63.0.3239.132 版本）中使文本区域无法选择（仅内部文本无法选择）？

在 Edge、Explorer 和 Firefox 中，此代码有效，但在 Chrome 中无效。

还有其他样式属性要添加吗？

.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;
}

<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>

Answer 1

试试下面的代码。用户将无法使用此 CSS 选择任何文本。而且我检查了许多浏览器，它们与所有浏览器兼容，因此您可以使用此 CSS。

因为最好有一个可供其他用户使用的解决方案，而不仅仅是提问者。

$(document).ready(function() {
  $('#objLog').bind("select", function(e) {
    e.preventDefault();
    $(this).text($(this).text());
    return false;
  });
});

.mytextarea {
  cursor: default;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  background: #fff;
  width: 400px;
  height: 100px;
  color:grey
}

.mytextarea::-moz-selection {
  color:grey;
  background: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.mytextarea::selection {
  color:grey;
  background: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 Test Test Test Test Test Test Test Test Test Test Test Test</textarea>

Answer 2

这应该也可以

.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>

Answer 3

如果你愿意，你可以用一个包装器 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>