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

Try the code below. The user will not be able to select any text with this CSS. And I've checked with many browsers, they are compatible with all browsers so you can use this 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>