右矢印キーが押されたときに次の文字が表示されない

Question

テキストエリアにテキストエリアがあり、テキストエリアに入力してカーソルを中央に置き、右矢印を移動すると次の文字が強調表示されます次の文字を強調表示しますか？左矢印の場合、文字は強調表示されません。前もって感謝します。あなたのコードで

<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++; 
     } 
    } 
}]); 

Answer 1

とき、あなたはselectionStartとselectionEndの両方の性質をデクリメントされ、左矢印キーを押したとき。文字列の中央にカーソルを置くと、selectionStartとselectionEndの両方が等しくなります。つまり、カーソルの直前の文字の位置になります。 selectionStart=4とselectionEnd=4としましょう。selectionStartをデクリメントすると3になり、次にselectionEndがデクリメントすると、両方とも同じ場所を指すので、どちらも選択しないようになります。しかし、あなたはselectionStartをインクリメントするとき、右矢印を押して少し異なるその作品で、それはselectionEndがselectionStart未満になることはありませんので、5も、それはselectionEndの値をインクリメントするなり（エンドとしてスタート後ろにすることはできません）ので、selectionEndは5になり、その後、インクリメントselectionEnd6になりますので、selectionStart=5とselectionEnd=6となりました。だからあなたはこれに応じて1つのキャラクタを選択し、それゆえ行動を起こします。

あなたが望むものを達成するためには、右矢印の押下ハンドラで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>

このことができます:)コメントで私のフォローアップの質問には

Answer 2

MDN SelectionStart

MDN SelectionEnd

希望ですが、私はそれを行うために管理しましたこれで。

if (code == 37) { 
      document.activeElement.selectionEnd--; 
       var test = false; 
      if(test == false){ 
      // document.activeElement.selectionStart--; 
       document.activeElement.selectionEnd--; 
       if(document.activeElement.selectionStart == 0){ 
       test = true; 

       document.activeElement.selectionEnd = 0; 
       document.activeElement.selectionStart = 0; 
       } 
     }