Javascript - Removing Spaces On Paste

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

Solution 1:

This should work for you:

HTML

<inputtype="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');
 }
 elseif (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.

Solution 2:

This function will help you do it:

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

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

Solution 3:

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:

1. 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.

2. 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) { returntrue; }
       returnthis.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);

Solution 4:

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');
      } elseif (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