Question

我有一个多值textarea读/写ng-model（数组）。

我有一个div（荧光笔），其作用类似于包含与ng-model相同的值的遮罩，但突出显示在＆＃34; NaN（值）＆＃34;上返回false的值。

如果我在textarea中按Enter键，则会创建一个新行。在输入内容之前，此行不会成为值数组（ng-model）的一部分。如果没有输入任何内容并且创建了新的空行，则在高亮蒙版和textarea之间将发生偏移。

enter image description here

Sugestions ???

如果没有这样做，一切正常：

enter image description here

查看：

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

如果我现在将以下自定义指令添加到textarea中，我将禁止连续按两次输入但是如果在我创建新行的下面的行中突出显示无效值，则会发生一行/行的偏移在荧光笔div和textarea值之间，因为我没有在荧光笔div中创建相同的空行。即使textarea和highlighter 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突出显示：当空行留下时偏移

1 个答案: