Do not allow to write special character

Question

I am trying to make a hashtag system using jquery but i have a question about the special character, ctrl+V and mause right click paste. I don't want to allow ctrl+v and right click paste and also i don't want to allow special character like (*/-+()[]{}?-_^|!'"<>&%,.:;`).

Can we do it in my code anyone can help me here please ?

Here is the DEMO page

In this demo you can see when you write for example how are you then the jquery code automatically adding diez(#) symbol before the world like this #how #are #you .

Here is the quick code:

$(document).ready(function() {
  $("body").on("keyup", "#hash", function(event) {
    var keyCode = event.keyCode;
    // Allow: backspace, delete, tab, escape et enter
    if (
      $.inArray(keyCode, [46, 8, 27]) !== -1 ||
      // Allow: Ctrl+A, Command+A
      (keyCode == 65 && (event.ctrlKey === true || event.metaKey === true)) ||
      // Allow: Ctrl+Z, Command+Z
      (keyCode == 90 && (event.ctrlKey === true || event.metaKey === true)) ||
      // Allow: home, end, left, right, down, up
      (keyCode >= 35 && keyCode <= 40)
    ) {
      // let it happen, don't do anything
      return;
    }

    if ($.inArray(keyCode, [32, 9, 13]) !== -1) {
      var $textarea = $(this);
      var text = $textarea.val();
      text = XRegExp.replaceEach(text, [
        [/#\s*/g, ""],
        [/\s{2,}/g, " "],
        [
          XRegExp(
            "(?:\\s|^)([\\p{L}\\p{N}]+)(?=\\s|$)(?=.*\\s\\1(?=\\s|$))",
            "gi"
          ),
          ""
        ],
        [XRegExp("([\\p{N}\\p{L}]+)", "g"), "#$1"]
      ]);

      $textarea.val(text);
      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();
    }
  });
});

.hash {
  position:relative;
  width:100%;
  border:1px solid #d8dbdf;
  outline:none;
  padding:15px;
  color:#292929;
}
.hash:focus {
  border:1px solid red;
}
.container {
  position:relative;
  width:100%;
  max-width:600px;
  margin:0px auto;
  margin-top:100px;
}

<script src="https://unpkg.com/xregexp@3.2.0/xregexp-all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <input type="text" class="hash" id="hash" placeholder="Write your word and press enter"/>
</div>

Possible duplicate of [How to prevent user pasting text in a textbox?](https://stackoverflow.com/questions/15320069/how-to-prevent-user-pasting-text-in-a-textbox) — Sam, Jul 27 '18 at 20:18
@samuel the question is not only disable copy paste section i am also asking how to disable to write special character. — AlwaysStudent, Jul 27 '18 at 20:25
that would still be a [duplicate of this one](https://stackoverflow.com/a/8833854/1527252) with an appropriate answer. — Sam, Jul 27 '18 at 20:27

score 1 · Answer 1 · answered Jul 27 '18 at 20:21

1

What you need is to prevent the default event when such actions are performed by users. So the simplest approach could be to just capture the events and prevent them.

You are on the right track with filtering out the unwanted characters based on the keycodes. Although not the most optimal way of doing it, it will do the job.

  $('#hash').on("paste",function(e) {
      e.preventDefault();
  });

  $('#hash').bind("contextmenu", function(e) { 
      e.preventDefault(); 
  });

Just add the above within your $(document).ready function

answered Jul 27 '18 at 20:21

adage231

126
6

1

Or using `onPaste` and `onCopy` attributes and return `false` – Sam Jul 27 '18 at 20:23
@kmukkamala the question is not only disable copy paste section i am also asking how to disable to write special character. – AlwaysStudent Jul 27 '18 at 20:25
@Azzo For preventing special characters, you can simply use the `which` property on the event to determine which key was pressed and then filter them out similar to how you are doing it with the `keyCode` right now. – adage231 Jul 27 '18 at 20:27

Do not allow to write special character

1 Answers1