HTML
If you’re trying to do this strictly with HTML, I believe the following is going to get you about as close as is currently possible:
<label for="ccn">Credit Card Number:</label>
<input id="ccn" type="tel" inputmode="numeric" pattern="[0-9\s]{13,19}" autocomplete="cc-number" maxlength="19" placeholder="xxxx xxxx xxxx xxxx">
inputmode
sets the keyboard type (in this case, numeric)pattern
enables validation (in this case, numbers and spaces with a length of between 13 and 19) and it helps with keyboard type for browsers that don’t yet supportinputmode
autocomplete
tells browser what should be autocompleted (in this case, a credit card number)maxLength
prevents the user from entering more than the set number of characters (in this case, 19, to include numbers and spaces)placeholder
gives the user an example (formatting hint)
JavaScript
For a more robust solution, JavaScript is going to be required. And rather than roll your own solution, it’d probably be best to use a battle-tested library. Cleave.js (as you mentioned) is a popular choice.