input field's phone mask ignored when using jquery virtual keyboard

Question

do phone masks not work for programmatic input, or will it not work with the below code, or am i just not implementing any of it correctly?

code below is jquery keyboard beneath input field in a form. works, characters typed with the virtual keyboard appear in the input field.

$(document).ready(function () {
   var input_1 = $(".quform-field-101_43");
    
  $(".quform-field-101_43").keydown(function () {
    return false;
  });

  $(".calcPhone").click(function () {
    let value1 = $(this).val();
    fieldPhone(value1);
  });
  function fieldPhone(value1) {
    input_1.val(input_1.val() + value1).triggerHandler('blur');
  }
  $("#clearPhone").click(function () {
    input_1.val("").triggerHandler('blur');
  });
   $("#bkspcPhone").click(function () {
     input_1.val(input_1.val().slice(0, -1)).triggerHandler('blur');
   });
 });


<input type="text" class="quform-field-101_43" /></br>
<input type="button" value="1" id="1" class="pinButton calcPhone"/>
<input type="button" value="2" id="2" class="pinButton calcPhone"/>
<input type="button" value="3" id="3" class="pinButton calcPhone"/><br>
<input type="button" value="4" id="4" class="pinButton calcPhone"/>
<input type="button" value="5" id="5" class="pinButton calcPhone"/>
<input type="button" value="6" id="6" class="pinButton calcPhone"/><br>
<input type="button" value="7" id="7" class="pinButton calcPhone"/>
<input type="button" value="8" id="8" class="pinButton calcPhone"/>
<input type="button" value="9" id="9" class="pinButton calcPhone"/><br>
<input type="button" value="clear" id="clearPhone" class="pinButton clearPhone"/>
<input type="button" value="0" id="0" class="pinButton calcPhone"/>
<input type="button" value="backspace" id="bkspcPhone" class="pinButton bkspcPhone"/><br />

i need phone number input field to be formatted as: (555) 555-5555. however, various phone masks such as:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/jquery-input-mask-phone-number@1.0.0/dist/jquery-input-mask-phone-number.js"></script>
<script>
        $(document).ready(function () {
            $('.quform-field-101_43').usPhoneFormat({
                format: '(xxx) xxx-xxxx',
            });
        });

or:

jQuery(function ($) {
    if ($.fn.mask) {
        $('.quform-field-101_43').mask('(000) 000-0000');
    }
});


add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('jquery-mask-plugin', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js', array(), '1.14.15', true);
});
 
add_filter('quform_element_valid_101_43', function ($valid, $value, Quform_Element_Field $element) {
    if ( ! preg_match('/^\(\d{3}\) \d{3}\-\d{4}$/', $value)) {
        $element->addError('Enter a phone number in the format (000) 000-0000');
        $valid = false;
    }
 
    return $valid;
}, 10, 3);

etc., are only formatting if using a physical keyboard. how do i get a phone mask to work with programmatic input? multiple input masks found on this site and elsewhere fail unless using a physical keyboard. edit: or native os virtual keyboard.

chrome, win10. can't use os native keyboard. first post, sorry for any formatting issues.

input field's phone mask ignored when using jquery virtual keyboard

0 Answers0