As per my understanding of the question, I would like to share two different solutions to this.

1. If you have already created an open-end box with the limitation of length. Paste following code in the footer to restrict only numeric entries -


<script>
 $(\"#phone\").on(\"keypress keyup blur\",function (event) {    
    $(this).val($(this).val().replace(/[^\\d].+/, \"\"));
    if ((event.which < 48 || event.which > 57)) {
    \tevent.preventDefault();
    }
});
</script>

2. If you want to separate boxes of STD code and number, create an open-end question and paste following code in footer -


<style>
#[% QuestionName() %] {
\tdisplay: none;
}

#[% QuestionName() %]_div .phoneInput {
\tmargin-left: 0px;
\tmargin-right: 0px;
}
</style>

<script>
$(document).ready(function(){
\t// Parameters
\tvar phoneFormat = [
\t
\t\t[7, '5555555'],
\t\t' - ',
\t\t[3, '555']
\t];
\t
\t// Append strings and inputs
\tvar phoneInputCount = 0;
\tphoneFormat.forEach(function(elem){
\t\t// String
\t\tif (typeof elem === 'string') {
\t\t\t$('#[% QuestionName() %]_div .question_body').append('<span>' + elem + '</span>');
\t\t}
\t\t
\t\t// Input
\t\telse {
\t\t\t// Read param
\t\t\tvar min, max, placeholder;
\t\t\tif (!Array.isArray(elem)) {
\t\t\t\tmin = elem;
\t\t\t\tmax = elem;
\t\t\t}
\t\t\telse {
\t\t\t\tmin = elem[0];
\t\t\t\tmax = (typeof elem[1] === 'number') ? elem[1] : min;
\t\t\t\tplaceholder = (typeof elem[1] === 'string') ? elem[1] : elem[2];
\t\t\t}
\t\t\t
\t\t\t// Append input
\t\t\tphoneInputCount++;
\t\t\tplaceholder = placeholder ? placeholder : '';
\t\t\tvar html = '<input type=\"text\" class=\"phoneInput\" data-order=\"' + phoneInputCount + '\" data-min=\"' + min + '\" maxlength=\"' + max + '\" placeholder=\"' + placeholder + '\"/>';
\t\t\t$('#[% QuestionName() %]_div .question_body').append(html);
\t\t\t$('#[% QuestionName() %]_div .phoneInput[data-order=\"' + phoneInputCount + '\"]').css('width', Math.max(max, placeholder.length) * 10 + 'px');
\t\t}
\t});
\t
\t// Fill inputs
\tvar phoneNumberArr = SSI_GetValue('[% QuestionName() %]').split(' ');
\tfor (var i = 1; i <= phoneNumberArr.length; i++) {
\t\t$('#[% QuestionName() %]_div .phoneInput[data-order=\"' + i + '\"]').val(phoneNumberArr[i - 1]);
\t}
\t
\t// Key up
\t$('#[% QuestionName() %]_div .phoneInput').keyup(function(){
\t\t// Numeric characters only
\t\tvar nonNumericMatch = $(this).val().match(/\\D/g);
\t\tif (nonNumericMatch) {
\t\t\tvar selectionStart = this.selectionStart;
\t\t\tvar selectionEnd = this.selectionEnd;
\t\t\tvar nonNumerics = nonNumericMatch.length;
\t\t\t$(this).val($(this).val().replace(/\\D/g, ''));
\t\t\tthis.setSelectionRange(selectionStart - nonNumerics, selectionEnd - nonNumerics);
\t\t}
\t\t
\t\t// Switch focus automatically
\t\tif ($(this).val().length == $(this).attr('maxlength')) {
\t\t\tvar order = Number($(this).data('order'));
\t\t\t$('#[% QuestionName() %]_div .phoneInput[data-order=\"' + (order + 1) + '\"]').focus();
\t\t}
\t\t
\t\t// Update response
\t\tvar resp = $('#[% QuestionName() %]_div .phoneInput').map(function(){ return $(this).val(); }).get().join(' ');
\t\t$('#[% QuestionName() %]').val(resp);
\t});
})
</script>

HTML for Free Format qeustions