After one backspace move, the cursor on the phone number field automatically moves to the end which can be inconvenient if the user only wants to edit the area code. Unfortunately, I am unable to post images at the moment due to insufficient reputation.
Below is the code for the text field button, and if more context is required, please let me know:
{
name: 'ContPhone',
itemId: 'ContPhone',
fieldLabel: I18N.Messages.STR_PHONE,
maxLength: 25,
width: 370,
labelCls: 'formFieldLabel',
enforceMaxLength: true,
plugins: Ext.create('Silver.ux.plugin.FormatPhoneNumber'),
vtype: 'phone'
},
I suspect that the culprit may be the onChange() function in the plugin/extension information provided below. I would appreciate guidance on how to resolve this issue so that the cursor position remains intact even after deleting a digit from the field before saving.
Ext.define('Silver.ux.plugin.FormatPhoneNumber', {
extend: 'Ext.form.TextField',
init: function (c) {
// Phone number formatting
Ext.apply(Ext.util.Format, {
phoneNumber: function (value) {
var phoneNumber = value.replace(/\./g, '').replace(/-/g, '').replace(/[^0-9]/g, '');
// Formatting for US phone numbers
if (phoneNumber !== '' && phoneNumber.length === 10 && UI_CULTURE === 'en-US') {
return '(' + phoneNumber.substr(0, 3) + ') ' + phoneNumber.substr(3, 3) + '-' + phoneNumber.substr(6, 4);
} else {
return value;
}
}
});
// Validating phone numbers
Ext.apply(Ext.form.VTypes, {
'phoneText': (UI_CULTURE === 'en-US' ?
'Not a valid phone number. Must be in the format (555) 555-5555.' :
'Not a valid phone number. Must be a number 0-9.'),
'phoneMask': /[\-\+0-9\(\)\s\.Ext]/,
'phoneRe': (UI_CULTURE === 'en-US' ?
/^(\({1}[0-9]{3}\){1}\s{1})([0-9]{3}[\-]{1}[0-9]{4})$|^(((\+44)? ?(\(0\))? ?)|(0))( ?[0-9]{3,4}){3}$|^Ext\. [0-9]+$/ :
/^[0-9\s]+$/),
'phone': function (v) {
return this.phoneRe.test(v);
}
});
c.on('change', 'onChange', this);
},
onChange: function (c) {
c.setValue(Ext.util.Format.phoneNumber(c.getValue()));
}
});