2016-10-12 10 views
1

テキストボックスがあります。私は、コピーしたい数字と特殊文字を貼り付けてください。 私は以下のコードを試してみました。Angularjsを使用してテキストボックス内の特殊なcharatetrsとアルファベットのコピー貼り付けを制限する方法

<!DOCTYPE html> 
    <html ng-app="plnk"> 

     <head> 
     <script data-require="[email protected]*" data-semver="2.0.0" src="https://ajax.googleapis`enter code here`.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
     <link rel="stylesheet" href="style.css" /> 
     <script src="script.js"></script> 
     <script src="app.js"></script> 
     </head> 

     <body> 
     <h1>Disable copy paste</h1> 
     for testing if angular is working {{1+1}} 

     <br/> 
     <input stopcopypaste ng-model="val" /> 
     </body> 

    </html> 

のjavascript:

var app = angular.module('plnk', []); 
app.controller('MainCtrl', function($scope, $timeout) { 
    $scope.val = '1'; 
}); 

app.directive('stopcopypaste', function(){ 
     return { 
     scope: {}, 
     link:function(scope,element){ 
      element.on('cut copy paste', function (event) { 
      key = event.keyCode || event.which; 
      if ((47 < key) && (key < 58) || key == 8 || key == 189 || key == 109) { 
      return true; 
     } else { 
       event.preventDefault(); 
       return false; 
     } 
     }) 
      }) 
     } 
    }; 
}); 

私はこのコードのアルファベットと特殊文字を制限することはできません。

https://plnkr.co/edit/QGUuNyVqEj7jZtWmlAez?p=preview

答えて

1

あなたはng-pasteディレクティブを使用し、そのようにそれにコントローラ機能を付け、それを行うことができます。

app.js -

app.controller('MainCtrl', function($scope, $timeout) { 
    $scope.val = '1'; 

    $scope.pasteOptions = function(e) { 
     var regex = /^\d+$/; 
     var pastedData = e.clipboardData.getData('text/plain'); 
     if(pastedData.match(regex) === null) { 
      e.preventDefault(); 
      return false; 
     } 
    }; 
}); 

HTML -

<body ng-controller="MainCtrl"> 
... 
... 
<input ng-paste="pasteOptions($event)" ng-model="val" /> 

コピーするには、 - ng-copyng-cut

更新plunker - https://plnkr.co/edit/pGk16GUGu9Tc0vTMvQND?p=preview

+0

あなたplunkがcorect ..ですが、私は... NG-ペースト – pankaj

+0

上のメソッドを呼び出すのではなく、この使用してカスタムディレクティブを達成することが可能であるNG-ペーストを使用する際の制限がどのような種類の制限...?カスタムディレクティブを記述してjQueryを使用することができます - http://stackoverflow.com/questions/686995/catch-paste-input – Aks1357

関連する問題