textarea中不可编辑的尾随文本

时间:2016-02-04 15:41:06

标签: angularjs angularjs-directive

我一直在与此斗争几天无济于事。

我需要有一个带有不可编辑文本的文本区域。

这是文本区域开头的文字小提琴,要求是将它放在最后。任何人都有任何见解如何实现这一目标?

http://jsfiddle.net/codemonkeytony/3ew5h6bf/7/

 var partialApp = angular.module("partialApp", []);

 partialApp.directive('partialReadonly', function () {
 return {
     restrict: 'A',
     link: function (scope, elem, attrs) {
         elem.on('keypress, keydown', function (event) {
            console.log(scope.bbb);
          console.log(event);
             var readOnlyLength = attrs["partialReadonly"].length;
             if ((event.which != 37 && (event.which != 39)) && ((elem[0].selectionStart < (scope.bbb - readOnlyLength )) || ((elem[0].selectionStart != (scope.bbb - readOnlyLength )) && (event.which == 8)))) {
                 event.preventDefault();
             }
         });
         $(window).load(function () {
                 elem[0].value = attrs["partialReadonly"];
             });
         }
     };
 });

1 个答案:

答案 0 :(得分:0)

我已经更新了keypress事件处理程序的逻辑。如果您需要此行为,请检查此更新的fiddle

partialApp.directive('partialReadonly', function () {
 return {
     restrict: 'A',
     link: function (scope, elem, attrs) {
         var readOnlyText = attrs["partialReadonly"];
         var readOnlyLength = readOnlyText.length;
         var ele = elem[0];
         elem.on('keypress, keydown', function (event) {
             var actualTextLength = ele.value.length - readOnlyLength;
             var readOnlyTextStartIndex = actualTextLength; 
             if (elem[0].selectionStart > readOnlyTextStartIndex) {
                 event.preventDefault();
             }
         });
         $(window).load(function () {
             elem[0].value = attrs["partialReadonly"];
         });
     }
 };
 });