Solution:
You can rewrite code country after complete typing number like this:
This is work only for morocco numbers 06 or 07
document.querySelector('input[name="phone_number"]').addEventListener('keyup',function(e){
let value = this.value;
if (value.length == 10 && ['06','07'].includes(value.slice(0, 2))) {
this.value = '+212'+ value.slice(1);
}
});
<input type="text" name="phone_number">
The second solution is make another input to fix the code country
try it:
let ph_input = document.querySelector('input[name="phone_number"]');
//ph_input.setAttribute('type', 'hidden');
let clone = ph_input.cloneNode(true);
ph_input.parentElement.appendChild(clone).setAttribute('type', 'hidden');
let name = ph_input.getAttribute('name') + '_fix_code';
ph_input.setAttribute('default_name', ph_input.getAttribute('name'));
ph_input.setAttribute('name', name);
document.querySelector(`input[name="${name}"]`).addEventListener('keyup',function(e){
let value = this.value;
let name = this.getAttribute('default_name');
let default_input = document.querySelector(`input[name="${name}"]`);
default_input.value = value;
if (value.length == 10 && ['06','07'].includes(value.slice(0, 2))) {
default_input.value = '+212'+ value.slice(1);
}
});
// Button For Test
document.querySelector(`.test`).addEventListener('click', function (e) {
let value = document.querySelector('input[name="phone_number"]').value;
alert(value);
});
<input type="text" name="phone_number">
<button class="test">Test</button>
To add the code into wordpress go to your active theme edit file functions.php and put this code at the end of the functions.php
add_action('wp_footer', 'fix_code_country');
function fix_code_country()
{
?>
<script type="text/javascript">
try {
let ph_input = document.querySelector('input[name="phone_number"]');
//ph_input.setAttribute('type', 'hidden');
let clone = ph_input.cloneNode(true);
ph_input.parentElement.appendChild(clone).setAttribute('type', 'hidden');
let name = ph_input.getAttribute('name') + '_fix_code';
ph_input.setAttribute('default_name', ph_input.getAttribute('name'));
ph_input.setAttribute('name', name);
document.querySelector(`input[name="${name}"]`).addEventListener('keyup', function(e) {
let value = this.value;
let name = this.getAttribute('default_name');
let default_input = document.querySelector(`input[name="${name}"]`);
default_input.value = value;
if (value.length == 10 && ['06', '07'].includes(value.slice(0, 2))) {
default_input.value = '+212' + value.slice(1);
}
});
} catch {}
</script>
<?php
};