Javascript - Removing spaces on paste

Question

I have an input text field with a maxlength of 10. The field is for Australian phone numbers (10 digits). Phone numbers are generally split up into the following syntax

12 12345678

If someone copies the above and pastes that into my input field, it obviously leaves the last digit out and keeps the space.

Is there a way to remove any spaces right before it is pasted into the input box? Or is there another work around?

Thanks in advance.

score 18 · Accepted Answer · edited May 16 '18 at 20:57

18

This should work for you:

HTML

<input type="text" id="phone" maxlength="10" />

JavaScript

var phone = document.getElementById('phone'),
    cleanPhoneNumber;

cleanPhoneNumber= function(e)
{
 e.preventDefault();
 var pastedText = '';

 if (e.clipboardData && e.clipboardData.getData)
 {// Standards Compliant FIRST!
  pastedText = e.clipboardData.getData('text/plain');
 }
 else if (window.clipboardData && window.clipboardData.getData)
 {// IE
  pastedText = window.clipboardData.getData('Text');
 }

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

phone.onpaste = cleanPhoneNumber;

Fiddle: http://jsfiddle.net/y6TYp/6/

Update nnnnnn had a great point regarding Australian phone numbers, updating replace regex.

edited May 16 '18 at 20:57

John

1
13
98
177

answered Aug 14 '12 at 00:19

Paul

12,392
4
48
58

2

You might want to remove parentheses and hyphens too, since Australian phone numbers are often written with some variation on `(02)6543-2109`. So maybe `.replace(/\D/g, '')` (i.e., replace any non-digit with empty string). – nnnnnn Aug 14 '12 at 00:28
I was also looking for a cross browser solution. This certainly works in Chrome and IE9. This doesn't seem to work in Firefox, though. On MDN, in the notes section: "There is currently no DOM-only way to obtain the text being pasted; you'll have to use an nsIClipboard to get that information." – JayC Aug 14 '12 at 00:31
@nnnnnn Beautiful! I did not even think of that but I've just implemented it, great idea. Much appreciated! – Matt Aug 14 '12 at 00:33
`.onpaste` does not have a great cross-browser support matrix, does it? What about using `.onchange` instead and removing the maxlength limitation, so that whenever the textfield is updated, spaces etc. are filtered out? – Oleg Aug 14 '12 at 07:48
In jQuery, it will be `e.originalEvent.clipboardData` – mbomb007 Apr 25 '19 at 14:02
I don't get this weird syntax. What does this line do: `var phone = document.getElementById('phone'), cleanPhoneNumber;` – NickG Feb 24 '23 at 11:40

score 2 · Answer 2 · edited May 23 '17 at 12:31

2

This function will help you do it:

function removeSpaces(string) {
 return string.split(' ').join('');
}

Alternatively, using jQuery, you can use the method described here: Delete white spaces in textbox when copy pasted with jquery

edited May 23 '17 at 12:31

Community

1
1

answered Aug 14 '12 at 00:02

karancan

2,152
4
23
35

1

Thanks for the reply. Unfortunately these don't seem to be viable solutions when maxlength is set. Try pasting the following "12 12345678" into the jsfiddle I made: http://jsfiddle.net/xNdDM/1/ – Matt Aug 14 '12 at 00:20

score 1 · Answer 3 · answered Aug 14 '12 at 00:36

Approaching the task you described you want to make sure that your code works in different browsers with or without javascript so I would do the following:

Set the maxlength to 11 - maxlength is an HTML attribute and you need to make sure that with or without javascript the data entered by the user is not lost. If the user enters 11 digits and there is no javascript - you will need to capture the data and cleanse it from the server side. Well, server side validation is mandatory.
If the javascript is there I would use the jquery function to set the maxlength and ensure that the spaces are removed, so say you have a field with ID = 'title': on document ready you write the following code:

$('input#title').attr('maxLength','10').keypress(limitMe);
```
function limitMe(e) {
    if (e.keyCode == 32) { return true; }
    return this.value.length < $(this).attr("maxLength");
}
```

Obviously if you have numerous fields you just decorate all of the input fields with the same class attribute and then apply it to all the fields like so:

$('input.limited').attr('maxLength','10').keypress(limitMe);

Jodyshop · Answer 4 · 2020-08-09T17:39:13.537

In case you want to replace anything including Alphabet characters, Arabic characters, uppercase letters, and numbers on paste you can use this function:

cleanPermalink= 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 can replace English, Arabic, and Numbers spaces with (-)
    this.value = pastedText.replace(/[^a-zA-Z؀-ۿ0-9-]+/g,'-');

    // In case you want both Lowercase and Replace spaces use:
    // this.value = pastedText.toLowerCase().replace(/[^a-zA-Z؀-ۿ0-9-]+/g,'-');
};

permalink.onpaste = cleanPermalink;

Hope it can help someone.

Thank you

Javascript - Removing spaces on paste

4 Answers4

Linked