Replace a specific character in an input type="text"

Question

Replace a specific character in an input type="text"

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (1 votes)
#4 by (1 votes)

3

I need to make a function in JavaScript that when clicking the button make sure that a specific character was entered, in this case the ' (single quotation marks). If yes, replace the single quotation mark with a blank space.

See the code below:

const charValidation = ()=> {
    let inputToValidate = document.querySelectorAll(".area-input input");
    for(i=0;i<inputToValidate.length;i++) {
        let inputZin = inputToValidate[i].value;
        if(inputZin.match(["\'"])) {
            let inputEr = inputZin.replace(/\'/g, "");
            inputZin.innerHTML = inputEr;

        }
    }
}

<span class="area-input">
  <input type="text" placeholder="nome"  title="não permitido caracteres especiais">
</span>
<span class="area-input">
  <input type="text" placeholder="telefone" title="apenas números">
</span>
<span class="area-input">
  <input type="text" placeholder="endereço" title="não permitido caracteres especiais">
</span>

<input type="button" onclick="charValidation()" value="OK">

I was thinking of getting rid of match and simply replacing it straight.

javascript jquery

asked by anonymous 17.12.2018 / 18:39

4 answers

2

use this function

$('input').keypress(function(e){
   if(String.fromCharCode(event.which) == "'"){
       event.preventDefault()
       $(this).val(str + ' '); 
   }
});

where input vc poe the class of your field.

17.12.2018 / 19:06

1

Speaking Young, beauty?

Uses .each and indexOf ..

I think this works fine:)

function charValidation(){

        $(".area-input input").each(function( index ) {
          var str = $(this).val();           
          if(str.indexOf("'") != -1 ){
            str = str.replace(/\'/g, "");
             $(this).val(str);
          }              
        });
}

Each will play the role of the loop:)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script  src="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
</head>
<body>
	<span class="area-input">
            <input type="text" placeholder="nome"  title="não permitido caracteres especiais">
        </span>
        <span class="area-input">
            <input type="text" placeholder="telefone" title="apenas números">
        </span>
        <span class="area-input">
            <input type="text" placeholder="endereço" title="não permitido caracteres especiais">
        </span>

        <input type="button" onclick="charValidation()" value="OK">
</body>
<script>
	
		function charValidation(){

			$(".area-input input").each(function( index ) {
		      var str = $(this).val();		     
		      if(str.indexOf("'") != -1 ){
		      	str = str.replace(/\'/g, "");
		      	 $(this).val(str);
		      } 		     
		    });
		}
	
</script>
</html>

17.12.2018 / 19:12

1

You can use replace with RegExp :

document.querySelectorAll('.area-input > input').forEach(i => i.value = i.value.replace(/'/g,' '))

Or split with join :

document.querySelectorAll('.area-input > input').forEach(i => i.value = i.value.split('\'').join(' '))

const charValidation = () => {
           
document.querySelectorAll('.area-input > input').forEach(i => i.value = i.value.replace(/'/g,' '))       
        
}

const charValidation2 = () => {
           
document.querySelectorAll('.area-input > input').forEach(i => i.value = i.value.split('\'').join(' '))  
        
}

<span class="area-input">
  <input type="text" placeholder="nome"  title="não permitido caracteres especiais">
</span>
<span class="area-input">
  <input type="text" placeholder="telefone" title="apenas números">
</span>
<span class="area-input">
  <input type="text" placeholder="endereço" title="não permitido caracteres especiais">
</span>
<p></p>
<input type="button" onclick="charValidation()" value="com RegExp">
<input type="button" onclick="charValidation()" value="com Split">

18.12.2018 / 11:23

Error using a function inside array in PHP How to do an underline effect by controlling the size of the underline

score 2 · Accepted Answer

You can do the direct replace without going through the match. The match only serves to verify the existence or capture something and get the result. The replace will only do the substitution if the character exists, and if it does not exist, it does nothing and does not give error.

Another thing, simple quotes do not need escape, and if the intention is to replace with a space, it would be " " instead of "" . You can also delete some lines of code, going all at once, as in the code below:

const charValidation = ()=> {
            let inputToValidate = document.querySelectorAll(".area-input input");
            for(let i=0;i<inputToValidate.length;i++) {
                inputToValidate[i].value = inputToValidate[i].value.replace(/'/g, " ");
            }
        }

<span class="area-input">
            <input type="text" placeholder="nome"  title="não permitido caracteres especiais">
        </span>
        <span class="area-input">
            <input type="text" placeholder="telefone" title="apenas números">
        </span>
        <span class="area-input">
            <input type="text" placeholder="endereço" title="não permitido caracteres especiais">
        </span>

        <input type="button" onclick="charValidation()" value="OK">

Also put a let in i of for to narrow the scope of variable only within for .