Here is the code
<script>
require([
"jquery"
], function($) {
'use strict';
$(document).ready(function () {
setTimeout(
function(){
let telephone = $('input[name="telephone"]');
telephone.keypress(function() {
console.log("Formatting phone number with keypress");
telephone.attr('maxLength', '13');
telephone.attr('minLength', '13');
telephone.addClass('validate-phone-13');
telephone.attr('type','tel');
let x = $(this).val();
x = x.replace(/\D+/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '(1ドル)2ドル-3ドル');
$(this).val(x);
});
telephone.focusout(function(){
console.log("Formatting phone number with focusout");
let x = $(this).val();
x = x.replace(/\D+/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '(1ドル)2ドル-3ドル');
$(this).val(x);
});
}, 8000);
});
});
</script>
This script loads in DOM and I can see the code when inspecting. but it doesn't execute code. it works fine on the local machine. Does it have to do something with timeout time?
3 Answers 3
Here is my code
Updated Code - Works Now
I changed the
$(document).ready(function() {
with the
$(window).on('load', function() {
now it loads the script when the whole page is loaded. but it still works with the SetTimeOut function if I remove the SetTimeOut function it doesn't work.
app/design/frontend/vendor/module/Magento_Checkout/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="after.body.start">
<block class="Magento\Framework\View\Element\Template" before="-" template="Magento_Checkout::telephone.phtml"/>
</referenceContainer>
</body>
</page>
app/design/frontend/vendor/module/Magento_Checkout/templates/telephone.phtml
<script type="text/javascript">
require([
"jquery"
], function($) {
'use strict';
$(window).on('load', function() {
setTimeout(function() {
console.log("In SetTimeOut Function");
let telephone = $('input[name="telephone"]');
// Set attributes once on document ready
telephone.attr({
'maxLength': '13',
'minLength': '13',
'inputmode': 'numeric',
'autocomplete': 'cc-number'
}).addClass('validate-phone-13 telephone');
// Formatting function
function formatPhoneNumber(value) {
return value.replace(/\D+/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '(1ドル)2ドル-3ドル');
}
// Format on keyup to reflect changes immediately
telephone.keypress(function(event) {
if ((event.key < '0' || event.key > '9') && event.key !== 'Backspace' &&
event.key !== 'ArrowLeft' && event.key !== 'ArrowRight' && event.key !== 'Delete') {
event.preventDefault();
}
let x = $(this).val();
$(this).val(formatPhoneNumber(x));
});
// Format on focusout to ensure consistent format
telephone.focusout(function() {
let x = $(this).val();
$(this).val(formatPhoneNumber(x));
});
}, 5000);
});
});
You would probably need to check on your server the dependencies that are installed (such as jQuery version, among many others) Just make sure that in both side (local and server side) everything is up to date by doing composer update in root directory of your project.
Try again.
If you have the same result, I assume your production data is different than your local one therefore your code might be inadequate for production environment. Here is a refactored version of your code which handles more smoothly use cases :
require(["jquery"], function($) {
'use strict';
$(document).ready(function() {
// Select the telephone input field
let $telephone = $('input[name="telephone"]');
// Set attributes and add class
$telephone
.attr('maxLength', '13')
.attr('minLength', '13')
.attr('type', 'tel')
.addClass('validate-phone-13');
// Function to format the phone number
function formatPhoneNumber() {
let x = $(this).val();
x = x.replace(/\D+/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '(1ドル)2ドル-3ドル');
$(this).val(x);
}
// Bind the formatPhoneNumber function to keypress and focusout events
$telephone.on('keypress', formatPhoneNumber);
$telephone.on('focusout', formatPhoneNumber);
});
});
If your issue still persist let us know. Regards.
Using setTimeout is not an ideal solution. if you still want to use setTimeout, and its working on your local system and not working in your server then you should increase the timeout duration to give the server more time to load the necessary resources. For instance, you could increase the delay from 8 seconds to 15 seconds.
<script>
require([
"jquery"
], function($) {
'use strict';
$(document).ready(function () {
setTimeout(
function(){
let telephone = $('input[name="telephone"]');
telephone.keypress(function() {
console.log("Formatting phone number with keypress");
telephone.attr('maxLength', '13');
telephone.attr('minLength', '13');
telephone.addClass('validate-phone-13');
telephone.attr('type','tel');
let x = $(this).val();
x = x.replace(/\D+/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '(1ドル)2ドル-3ドル');
$(this).val(x);
});
telephone.focusout(function(){
console.log("Formatting phone number with focusout");
let x = $(this).val();
x = x.replace(/\D+/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '(1ドル)2ドル-3ドル');
$(this).val(x);
});
}, 15000);
});
});
</script>
-
I have shared my code, what should I use if SetTimeOut is not ideal?Afzel Arshad– Afzel Arshad2024年08月15日 08:35:48 +00:00Commented Aug 15, 2024 at 8:35
-
without setTimeout is working or not?Charmi Patel– Charmi Patel2024年08月21日 05:01:15 +00:00Commented Aug 21, 2024 at 5:01
-
no, without timeout it doesn't workAfzel Arshad– Afzel Arshad2024年08月21日 08:14:18 +00:00Commented Aug 21, 2024 at 8:14
Explore related questions
See similar questions with these tags.