Angularjs : Restrict special characters on paste event

Question

I write the code for restrict special characters in textbox by using Angular Directives.Anyone please tell,how to restrict special characters on pasting in textbox

This is my code:

checks.directive("restrictnosplcharacters", function() {
    "use strict";
    return {
        restrict: "A",
        scope: {},
        replace: false,
        link: function(scope, element, attrs, ctrl) {
            element.bind('keypress', function(event) {
                if (event.keyCode != 8 && event.keyCode != 116 && event.keyCode != 32) {
                    var regex = new RegExp("^[a-zA-Z.]+$");
                    debugger
                    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
                    if (!regex.test(key)) {
                        event.preventDefault();
                        return false;
                    }
                }
            });
        }
    };
});

score 1 · Accepted Answer · answered Feb 12 '18 at 13:30

1

No reason to reinvent the wheel, AngularJS already have a ng-paste directive. Your directive could inject ng-paste into the element and simply cancel the paste event when the pasted text contains "special characters". It could look like this :

.directive('restrictnosplcharacters', function($compile) {
  return { 
    restrict : "A",
    controller: function($scope) {
      $scope.onPaste = function(e) {
        var text = e.clipboardData.getData('text/plain');
        if (!/^[a-zA-Z0-9- ]*$/.test(text)) {
          console.error('paste of "'+text+'" prevented')
          e.preventDefault()
        }  
      }  
    },   
    compile: function(cElement) {
      cElement.removeAttr('restrictnosplcharacters');
      return function(scope, element) {
        angular.element(element).attr('ng-paste', 'onPaste($event)');
        $compile(element)(scope)
      } 
    }    
  } 
});

Now you can paste "sample text" into the element but not "sample @text"

demo -> http://plnkr.co/edit/sqtIondyFh80zPS2V4vF?p=preview

Note: There may be problems with browsers that not support the Clipboard API. See this answer.

answered Feb 12 '18 at 13:30

davidkonrad

83,997
17
205
265

This code is working fine,thank you so much and one more thing It will won't allow including space I need to accept space also what can i do for that? – Prakash Feb 13 '18 at 05:40
Hey @Prakashhave, I guess you have removed the space in `/^[a-zA-Z0-9- ]*$/` (after `0-9-`) it should be `/^[a-zA-Z0-9- ]*$/` not `/^[a-zA-Z0-9-]*$/` then space / whitespace is accepted, also whitespaces only. – davidkonrad Feb 13 '18 at 05:47
@Prakash, you can also use `\s` instead of a blank `/^[a-zA-Z0-9-/\s]*$/` – davidkonrad Feb 13 '18 at 06:19
This is working fine sir..Thank you so much @davidkonrad – Prakash Feb 13 '18 at 07:07
Sir Actually I'm having another one doubt outside of this in angularjs only.I want to read the PDF file dimension i.e Height and width of the pdf file & also I want to know what type of file that is which means the file is pdf or word or .exe or anything.what can I do sir?please help me – Prakash Feb 13 '18 at 10:34
@Prakash, Sorry, dont even know if I understand the problem :) Dont know anything about reading PDF's, try post a new question for this issue. – davidkonrad Feb 13 '18 at 11:22
I'm already post the question sir,but nobody will answer for that question sir thats why i'm ask to u in chat @davidkonrad – Prakash Feb 13 '18 at 11:33
Sir can you please answer this question stack Question is : Angularjs : How to get the dimension of pdf doc in angularjs @davidkonrad – Prakash Feb 13 '18 at 11:53

score 0 · Answer 2 · answered Feb 12 '18 at 13:30

For this it's not possible to restrict paste event for that we need to use ng-paste.

we need to write separate function for ng-paste and in the html we call that function like this:

html:

In ths js file we need to write the js function

$scope.pasteOptions = function(event) {
        var clipboarddata = window.event.clipboardData.getData('text');
        var regex = new RegExp("^[a-zA-Z.]+$");
        var pastedData = window.event.clipboardData.getData('text/plain')
        if(pastedData.match(regex) === null) {
            event.preventDefault();
            return false;

        }
    };

Angularjs : Restrict special characters on paste event

2 Answers2