HTML input pattern with symbols automaticaly added - html

Question

I am creating a form where someone needs to enter a certain code so I want to use the pattern attribute on my input element.
But I need more than this.
For example the code looks like this: 12.01.19-123.45
But I don't want to user to enter the "." and the "-" symbol manually.
Is there a built in way so it gets added automatically?

Answer 1

No there is no built-in way. There are input fields with types for e.g. date and number though.
In your case, you could either chain multiple input fields (field values with the same name attribute will be sent as an array). Or have a custom validator and or formatter function that does format the code on a key-event such as key-up for example. You could use regex to do so or write a small parser for it.
E.g. something like that:
function onSubmit(event) {
event.preventDefault();
const myFieldArray = document.getElementsByName('myField[]');
for (const i of myFieldArray.values()) {
console.log(i.value);
}
}
input {
width: 50px;
/* do not do this - this is just for the demo */
}
<form onSubmit="onSubmit(event)">
<input type="number" name="myField[]" placeholder="12" />
<span>.</span>
<input type="number" name="myField[]" placeholder="01" />
<span>.</span>
<input type="number" name="myField[]" placeholder="19" />
<span>-</span>
<input type="number" name="myField[]" placeholder="123" />
<span>.</span>
<input type="number" name="myField[]" placeholder="45" />
<input type="submit" value="submit">
</form>
or
<form onSubmit="onSubmit(event)">
<input type="string" name="myField" placeholder="12" onKeyUp="format(this.value)"/>
<input type="submit" value="submit">
</form>
function format(value) {
// format the value here ...
}