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">
inputmodesets the keyboard type (in this case, numeric)patternenables 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 supportinputmodeautocompletetells browser what should be autocompleted (in this case, a credit card number)maxLengthprevents the user from entering more than the set number of characters (in this case, 19, to include numbers and spaces)placeholdergives 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.