Textarea highlight：当留下空行时偏移

Question

我有一个多值文本区域reading/writing from/to ng-model(array).

我有一个 div（荧光笔），它就像一个掩码，包含与 ng-model 相同的值，但突出显示 "NaN(value)" 上 return false 的值。

如果我在文本区域内按回车键，则会创建一个新行。在键入某些内容之前，此行不会成为值数组（ng-model）的一部分。如果未键入任何内容并创建了一个新的空行，则会在高亮遮罩和文本区域之间发生偏移。

建议???

如果不这样做，一切正常：

查看：

<script type="text/ng-template" id="form_field_float">
  <div spellcheck="false">
    <div class="highlighter" id="mirror">
      <div ng-repeat=" x in dbo.attributes[attobj.name] track by $index" ng-controller="textVal">
        <div ng-if="!check(x)"><span>{{ x }}</span></div>
        <div ng-if="check(x)">{{ x }}</div>
      </div>
    </div>
    <textarea id="textarea" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list="&#10;" ng-trim="false"></textarea>
  </div>
</script>

控制器：

  app.controller('textVal', ['$scope',
        function ($scope) {      
             $scope.check = function(valueToCheck){
                if(!isNaN(valueToCheck)){
                  return true;
                } else{ return false;}
             }
        }
   ]);

CSS:

  .highlighter, #textarea {
      width: 100%; 
  }



  .highlighter {
      position: absolute;
      padding: 1px;
      margin-left: 1px;
      color: white;

  }

  .highlighter span {

      color: red;
      background: red;
      opacity:.4;
  }

  #textarea {
      position: relative;
      background-color: transparent;
  }

如果我现在将以下自定义指令添加到文本区域，我将禁止连续两次按回车键，但是如果在我创建新行的下方的行中突出显示无效值而不是偏移量 1 line/row 将出现在荧光笔 div 和文本区域值之间，因为我没有在荧光笔 div 中创建相同的空行。即使文本区域和荧光笔 div 都绑定到同一个 ng-model，ng-model 也不会将空行存储为值。一旦在新的空行中输入一个值，偏移量就会消失，但我希望荧光笔 div 在发生这种情况时能够适应：

  app.directive('noTwolines', function () {

      return {
          restrict: 'A',
          require: '?ngModel',

          link: function (scope, element, attrs, ngModel) {
              if (!ngModel) return;
              ngModel.$parsers.unshift(function (inputValue) {
                  var digits = inputValue;
                  var textarea= document.getElementById("textarea");
                  var val = textarea.value;
                  var caretPos = val.slice(0, textarea.selectionStart).length;
                  console.log(inputValue.length);
                  console.log(val.slice(0, textarea.selectionStart).length);

                  if(caretPos === inputValue.length){
                    console.log('enter from end');
                    digits=  inputValue.replace(/\n{2,}/gm, '\n');
                  }
                  if(caretPos < inputValue.length && inputValue.indexOf('\n\n') != -1){
                    digits=  inputValue.replace(/\n{3,}/gm, '\n');
                  }

                  ngModel.$setViewValue(digits);
                  ngModel.$render();
                  return digits;

              });
          }
      };
  });

Answer 1

据我所知，您不希望高亮显示在空白处。如果这是正确的，那么只需在您的代码中添加以下行...

 app.controller('textVal', ['$scope',
    function ($scope) {      
         $scope.check = function(valueToCheck){
            // new code just below...
            if( !isNaN(valueToCheck) || (valueToCheck.trim() === '')){
            // trim just assures no whitespace.
              return true;
            } else{ return false;}
         }
    }
]);

Textarea highlight：当留下空行时偏移

Textarea highlight: offset when empty lines left

html

javascript

regex

textarea

angularjs