Copy paste only numbers javascript

Before you read furtherly, look at my answer and Priyal Pithadiya answer for two different methods on how you can do this.

I have a client that is not satisfied with the solution I got from yesterdays answer on here. Basically I have this script that prevents non number characters from being inserted in an input. It works perfectly when you type but I have a problem here I cannot figure out how to prevent non numbers from being pasted in.

My client has stated that he want to avoid using input number since that was the solution that was offered here but for personal reasons he said he needs to use input text.

If I have to change my code to get a result like this I will.

Please note, I cannot use jQuery, my solution must be javascript only.

This is my code:

//Prevent non numbers from keypress 
document.querySelector['#numbers-only'].addEventListener['keypress',preventNonNumbersInInput];

function preventNonNumbersInInput[event]{

  var characters = String.fromCharCode[event.which];

  if[![/[0-9]/.test[characters]]]{
    event.preventDefault[];
  }

}

//Prevent non numbers from being pasted only numbers can be pasted
document.querySelector['#numbers-only'].addEventListener['paste',pasteTest];
function pasteTest[]{
  //???
}

kayess

3,3849 gold badges29 silver badges44 bronze badges

asked Jun 7, 2018 at 7:45

1

@ try with given solution ,

  document.querySelector['#numbers-only'].addEventListener['keypress',preventNonNumbersInInput];
	  function preventNonNumbersInInput[event]{
		var characters = String.fromCharCode[event.which];
		if[![/[0-9]/.test[characters]]]{
			event.preventDefault[];
		}
	  }
	  
	  document.querySelector['#numbers-only'].addEventListener['paste',pasteTest];
	  function pasteTest[event]{
	   window.setTimeout[[] => {
		 var characters =event.target.value;
		 window.setTimeout[[] => {
			if[![/^\d+$/.test[characters]]]{
				event.target.value = event.target.value.replace[/\D/g, ''];
			 }
		 }];
	   }];
	  }

answered Jun 7, 2018 at 7:54

11

in-line js:

answered Feb 16 at 2:06

celsowmcelsowm

6208 gold badges30 silver badges56 bronze badges

You can use onpaste Event if you want.

function removeChars[] {
  var input = document.getElementById['numbers-only'];
  input.value = input.value.replace[/[^0-9]/g, ''];
}

answered Jun 7, 2018 at 7:50

wobsorianowobsoriano

11.2k23 gold badges83 silver badges147 bronze badges

3

Thanks Priyal Pithadiya for your help I will like to post two versions of Priyal Pithadiya examples from earlier and now which includes two versions one is with

a onpaste example and the other one is based on using an addEventListener by paste this is for any future readers reading this. All credit goes to Priyal Pithadiya.

With onpaste

 document.querySelector['#numbers-only'].addEventListener['keypress',preventNonNumbersInInput];
  function preventNonNumbersInInput[event]{
    var characters = String.fromCharCode[event.which];
    if[![/[0-9]/.test[characters]]]{
        event.preventDefault[];
    }
  }
  function myFunction[e] {
        var el = e;
        setTimeout[function[] {
            el.value = el.value.replace[/\D/g, ''];
        }, 0];
    }

With a event listener

  document.querySelector['#numbers-only'].addEventListener['keypress',preventNonNumbersInInput];
	  function preventNonNumbersInInput[event]{
		var characters = String.fromCharCode[event.which];
		if[![/[0-9]/.test[characters]]]{
			event.preventDefault[];
		}
	  }
	  
	  document.querySelector['#numbers-only'].addEventListener['paste',pasteTest];
	  function pasteTest[event]{
	   window.setTimeout[[] => {
		 var characters =event.target.value;
		 window.setTimeout[[] => {
			if[![/^\d+$/.test[characters]]]{
				event.target.value = event.target.value.replace[/\D/g, ''];
			 }
		 }];
	   }];
	  }

answered Jun 7, 2018 at 11:00