javascript - 阻止选择在 IE 中有效但在 Chrome 中无效的文本？

Question

我看过几篇关于阻止选择文本的不同帖子，但由于某种原因，此代码阻止在 IE 中进行选择，但在 Chrome 中则不然。我不明白为什么会这样。

 <input type="text" class="form-control no-select" name="inputField" placeholder="Select" ng-model="ctrl.ngModelValue">

 .no-select {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;  
}  

我基本上想防止输入中文本(ng-model)的突出显示。

上面的代码阻止了我在 IE 中选择文本，但由于某种原因我仍然可以在 Chrome 中突出显示输入元素中的文本？当涉及到某些工作时，通常情况正好相反。

谁能告诉我为什么会这样以及如何解决它？

谢谢!

Answer 1

嗯，我不知道如何使用css解决这个问题在input场，user-select: none规则也适用于其他标签，例如 <p> <div>等等

这里是JavaScript为您提供解决方案

参见FIDDLE

var inp = document.getElementById('myElement');
inp.addEventListener('select', function() {
  this.selectionStart = this.selectionEnd;
}, false);

.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;  
}  

 <input type="text" id="myElement" class="form-control no-select" name="inputField" placeholder="Select" ng-model="ctrl.ngModelValue">
 
 <p class="no-select">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quas, illo iste! Obcaecati quisquam, error doloremque, numquam iste, laboriosam possimus nostrum optio aperiam, distinctio quo accusamus cum molestias! Est, at!
 </p>