Removing spaces in input fields

Asked

Viewed 3,163 times

1

Colleagues.

I have a form that I would like the user to copy a particular word and paste into the input field, remove the spaces between the automatically copied phrase or word. Would have some medium in CSS or Javascript?

javascript css

  • You want to put mask on input?

  • Can you explain better "a certain word"?

  • It wouldn’t exactly be a mask. A certain word or phrase, where the user when copying for example the address of a Word and pasting in the input field of a form, automatically deletes the spaces he created before or after the word or phrase.

4 answers

5


Thus:

<input type="text" id="t" />

<script>
var $t = document.getElementById('t');
$t.addEventListener('paste', function(event) {
  setTimeout(function(){
    this.value = this.value.replace(/\s+/g, '');
  }.bind(this), 0)
});
</script>

Edit: If you only want the spaces before and after, just exchange the regex for:

.replace(/^\s+|\s+$/g, '')

  • Perfect William. It worked. Thank you very much.

  • @Fox.11 you had written "automatically delete the spaces you created before or after the word or phrase."... this code erases all white spaces. That’s what you want?

  • edited, adding regex to delete only before and after

  • What is the purpose of $ in the declaration of the variable?

  • 1

    good practices, the $ serves to identify a variable that points to a DOM object.

4

Based in that reply, we can see that using HTML and JS is possible. See how:

HTML

<input type="text" id="telefone" maxlength="10" />​

Javascript

var telefone = document.getElementById('telefone'),
    limparEspacos;

limparEspacos= function(e) {
    e.preventDefault();
    var pastedText = '';
    if (window.clipboardData && window.clipboardData.getData) { // IE
        pastedText = window.clipboardData.getData('Text');
      } else if (e.clipboardData && e.clipboardData.getData) {
        pastedText = e.clipboardData.getData('text/plain');
      }
    this.value = pastedText.replace(/\D/g, '');
};

telefone.onpaste = limparEspacos;

Recalling that the regex responsible for removing spaces is on that line: 

this.value = pastedText.replace(/\D/g, '');

That is, if you want to change some other character, you must change the mask /\D/g , inside .replace(/\D/g, ''); to match the desired characters.

3

It is possible to use the event paste. Then separate by spaces and then join without them:

function removerEspacos(e) {
  var clipboardData, pastedData;

  e.stopPropagation();
  e.preventDefault();

  clipboardData = e.clipboardData || window.clipboardData;
  pastedData = clipboardData.getData('Text');

  document.getElementById('entrada').value = pastedData.split(' ').join('');
}

document.getElementById('entrada').addEventListener('paste', removerEspacos);
<input id="entrada" />

  • Thank you all

2

var input = document.querySelector('input');
var palavras = ['palavra1', 'palavra2'];

function limpar() {
  var self = this;
  palavras.forEach(function(palavra) {
    var regex = new RegExp('\\s*' + palavra + '\\s*', 'g');
    self.value = self.value.split(regex).join(palavra);
  });
}

input.addEventListener('keyup', limpar);
input.addEventListener('paste', limpar);

/* Texto para testar:

Olá este texto tem a palavra1 no meio.

Este texto tem a palavra2, e também a palavra1 misturadas.

*/
input {
  width: 300px;
  padding: 5px;
}
<input>

The idea of the code is: every time there is paste or keyup he runs the function limpar that searches the input for each word with or without space before and after in the text. If you find remove the space and add the word to what was before and after, taking out the spaces.

Browser other questions tagged javascript css

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