How to block special characters in a textarea field

Asked

Viewed 111 times

-2

The thing is, I applied a mask on all inputs, which denies the entry of any character not allowed, so far so good, the problem is the textarea fields, I have already researched a lot and have not succeeded in blocking certain characters in it, since this field type does not accept the Pattern attribute of HTML 5.

// DEFINE A MÁSCARA PARA INPUTS

function maskCharacters(e) {
    var regex = new RegExp('[^ 0-9a-zA-Zàèìòùáéíóúâêîôûãõ\b@,.]', 'g');            
    $('input').bind('input', function(){
    $(this).val($(this).val().replace(regex, ''));
  });
} 
.support {
     max-width: 250px;
     height: auto;
}

.support input, .support textarea{
     width: 250px;
}
<div class="support">
  <label>Input de Exemplo</label>
  <input type="text" onkeydown="return maskCharacters(event)"> 
  
  <br>
  <br>
  
  <label>Textarea de Exemplo *</label>
  <textarea name="message" rows="4" maxlength="350" required=""></textarea>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

javascript html
  • 1

    Prevention of SQL Injection should be done in the backend. Never leave it to the frontend alone. That said, if the text does not accept, reject in the backend and show friendly message on the frontend. Validating too much at the front is never a good idea and a headache...

  • As I said, I did this prevention using PHP when I receive the data, I need something visual to prevent the user from entering such characters.

  • I’m already kind of hopeless, I can resort to a warning message perfectly, but then I’d run away from what I had in mind.

  • So, if you did the backend validation, in terms of security, you get nothing from the frontend validation. I understand that you already want to validate the user input in the textarea, but do not think it is a good idea. SQL injections are usually sent by Request via console/terminal, not directly in the page form. Anyway, just add the logic of input pro textarea tb, I added my answer.

  • I thought the question had turned bad, so I decided to delete.

  • But I’ll take a look at the question you quoted.

  • Actually, I think I’ll rethink, but to be more direct now.

Show 2 more comments

2 answers

2

In his job maskCharacters, you were indicating that it should return with the value validated only in $(input), without indicating the textarea along.

You also don’t need to use the bind, just add an event to the elements that you want to be validated:

function maskCharacters() {
  
      var regex = new RegExp('[^ 0-9a-zA-Zàèìòùáéíóúâêîôûãõ\b@,.]', 'g');            
    $(this).val($(this).val().replace(regex, ''));
}

$('textarea, input').keyup(maskCharacters);
.support {
     max-width: 250px;
     height: auto;
}

.support input, .support textarea{
     width: 250px;
}
<div class="support">
  <label>Input de de Exemplo</label>
  <input type="text"> 
  
  <br>
  <br>
  
  <label>Textarea de Exemplo *</label>
  <textarea name="message" rows="4" maxlength="350" required=""></textarea>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

1

Indicate in the jQuery selector that you want to apply the Blacklist function in the textarea as well, and add

$('input,textarea').bind('input', function(){

and add the external function Binding in the textarea:

onkeydown="return maskCharacters(event)"


// DEFINE A MÁSCARA PARA INPUTS

function maskCharacters(e) {
    var regex = new RegExp('[^ 0-9a-zA-Zàèìòùáéíóúâêîôûãõ\b@,.]', 'g');            
    $('input,textarea').bind('input', function(){
    $(this).val($(this).val().replace(regex, ''));
  });
} 
.support {
     max-width: 250px;
     height: auto;
}

.support input, .support textarea{
     width: 250px;
}
<div class="support">
  <label>Input de de Exemplo</label>
  <input type="text" onkeydown="return maskCharacters(event)"> 
  
  <br>
  <br>
  
  <label>Textarea de Exemplo *</label>
  <textarea name="message" rows="4" maxlength="350" required=""  onkeydown="return maskCharacters(event)"></textarea>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.