<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var \Magento\Customer\Block\Widget\Telephone $block */
?>

<div class="field telephone <?= $block->isRequired() ? 'required' : '' ?>">
    <label for="telephone" class="label">
        <span>
            <?= $block->escapeHtml(__('Phone Number')) ?>
        </span>
    </label>
    <div class="control">
        <input type="text"
                onkeypress="return validatePhone(event);"
               autocomplete="off"
               maxlength="18"
               name="telephone"
               id="telephone"
               onpaste="return false"
               value="<?= $block->escapeHtmlAttr($block->getTelephone()) ?>"
               title="<?= $block->escapeHtmlAttr(__('Phone Number')) ?>"
               class="input-text <?= $block->escapeHtmlAttr(
                   $block->getAttributeValidationClass('telephone')
               ) ?>"
        >
    </div>
</div>
<script>
    // document.querySelector("#telephone").addEventListener("keypress", function (evt) {
    //     if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57)
    //     {
    //         evt.preventDefault();
    //     }
    // });
    function validatePhone(event) {
        var key = window.event ? event.keyCode : event.which;
        if (event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 39 || event.keyCode == 40 || event.keyCode == 41 || event.keyCode == 43 || event.keyCode == 45) {
            return true;
        }
        else if ( key < 48 || key > 57 ) {
            return false;
        }
        else return true;
    };
</script>
