Javascript text区域高亮显示：保留空行时的偏移量

我有一个从ng modelarray读/写/到ng modelarray的多值文本区域

我有一个divhighlighter，它就像一个掩码，包含与ng模型相同的值，但突出显示在NaNvalue上返回false的值

如果在文本区域内按enter键，将创建一个新行。在键入某些内容之前，此行不会成为valuesng模型数组的一部分。如果未键入任何内容，并且创建了新的空行，则高亮显示遮罩和文本区域之间会出现偏移

暗示

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

视图：

CSS:

如果我现在将以下自定义指令添加到textarea，我将连续两次禁用enter键，但如果在我创建新行的下方的行中突出显示无效值，则高亮显示的div和textarea值之间将出现一行/行的偏移，因为我在中没有创建相同的空行highlighter div。即使textarea和highlighter div都绑定到同一个ng模型，ng模型也不会将空行存储为值。在新的空行中键入值后，偏移量立即消失，但我希望高亮显示的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;

              });
          }
      };
  });

---

从我收集的信息来看，您不希望突出显示在空白处工作。如果这是正确的，那么只需在代码中添加以下行

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

---

谢谢，我想出了同样的解决方案，但忘了发布。谢谢你！

  .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;
  }

  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;

              });
          }
      };
  });

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