Format Phone Number with Hyphens

So I want to be able for the user to add hyphens into their phone number(s) when entered into a form I have.

Whenever I add hyphens to the phone number field it pushes the hyphens to the very front for some reason, like this

but I want it to stay like this

Here's my code

a!textField(
                          label: "Contractor's Phone Number",
                          labelPosition: "ABOVE",
                          value: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{f2502f28-185b-4cdb-87eb-56e09d28d249}conphoneNum'],
                          saveInto: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{f2502f28-185b-4cdb-87eb-56e09d28d249}conphoneNum'],
                          refreshAfter: "UNFOCUS",
                          required: true,
                          characterLimit: 12,
                          validations:	{}
                           
                            )