javascript - 避免在按下javascript时突出显示下一个字母

我有一个带有keydown事件的textarea，当我键入textarea并将光标放在中间并向右箭头移动以突出显示下一个字母时，是否可以不突出显示下一个字母？对于左箭头，它可以正常工作，不会突出显示该字母。先感谢您。

<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
  <div class="row">
   <textarea name="text" id="text" cols="30" rows="10" ng-keydown="keyPress();"></textarea>
</div>
</div>
angular.module('myApp', [])
.controller("Ctrl_List", ["$scope", function(scope) {
  scope.keyPress = function(){
     var code = event.which;
       if (code == 37) {
            event.preventDefault();
            document.activeElement.selectionStart--;
            document.activeElement.selectionEnd--;
        }
        if (code == 39) {
            event.preventDefault();
            document.activeElement.selectionStart++;
            document.activeElement.selectionEnd++;
        }
  }
}]);

最佳答案

在您的代码中，当您按向左箭头键时，将同时减小selectionStart和selectionEnd这两个属性。当您将光标放在字符串的中间时，selectionStart和selectionEnd将相等，即，字符的位置就在光标之前。
因此，假设selectionStart=4和selectionEnd=4，则当递减selectionStart时，它变为3，然后递减selectionEnd，它也将变为3，因此它们都指向同一位置，因此没有选择。但是在向右箭头中按下它的效果会有所不同，当您增加selectionStart时，它会变为5，它也会增加selectionEnd的值，因为selectionEnd永远不会小于selectionStart（因为结尾在开始之后），因此selectionEnd变为5，然后递增selectionEnd它将变为6，所以现在您有了selectionStart=5和selectionEnd=6。因此，您要根据此选择一个字符，从而选择行为。

因此，为了实现所需的功能，您只需在右箭头按下处理程序中注释掉document.activeElement.selectionEnd++;代码行即可。 Belwo是一个演示

angular.module('myApp', [])
.controller("Ctrl_List", ["$scope", function(scope) {
  scope.keyPress = function(){
     var code = event.which;
       if (code == 37) {
            event.preventDefault();
            document.activeElement.selectionStart--;
            document.activeElement.selectionEnd--;
        }
        if (code == 39) {
            event.preventDefault();
            document.activeElement.selectionStart++;
            //document.activeElement.selectionEnd++;

        }
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div class="container" ng-controller="Ctrl_List">
  <div class="row">
   <textarea name="text" unselectable="on" id="text" cols="30" rows="10" ng-keydown="keyPress();"></textarea>
</div>
</div>

MDN SelectionStart

MDN SelectionEnd

希望这可以帮助 ：）

关于javascript - 避免在按下javascript时突出显示下一个字母，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45070952/