在某些设备（VueJS、iOS / Android）上未触发模糊事件答案

【问题标题】：Blur event not fired on some devices (VueJS, iOS / Android)在某些设备（VueJS、iOS / Android）上未触发模糊事件
【发布时间】：2021-09-01 04:12:34
【问题描述】：

实际上，我需要帮助来修复一个奇怪的错误，该错误发生在

似乎当我们进入一个输入字段并通过点击另一个字段或点击容器以松开焦点来退出它时，模糊事件在我的某些输入上正确发送，但在其他输入上却没有。

这里是代码： validationModal.vue

    <label class="validation-cap">E-mail interlocuteur</label>
    <div class="error-message" v-if="mailPersoControls.showPictoControl && mailPersoControls.statut !== 'ADRESSE_VALIDE' && mailPersoControls.message">{{ mailPersoControls.message }}</div>
    <div class="input-relative-validation">
        <input type="text" id="PM_email_perso" class="inputWithPicto" :class="isProspect ? 'border-prospect' : 'border-client'" name="PM_email_perso" v-on:blur="validateEmail('perso')" v-model="mailPerso" />
        <div class="validation-container" v-if="mailPersoControls.showPictoControl">
            <div v-if="mailPersoControls.isLoading" class="loader-control"></div>
            <span v-else class="span-validation-icon">
                <img @click="validateEmail('perso')" :src="mailPersoControls.statut !== 'ADRESSE_VALIDE' ? (mailPersoControls.statut === 'NC' ? require(`Images/shared/control-nc.png`) : require(`Images/shared/control-ko.png`)) : require(`Images/shared/control-ok.png`)" />
            </span>
        </div>
    </div>
    <label class="validation-cap">Téléphone professionnel</label>
    <div class="input-relative-validation">
        <input type="text" id="PM_tel_pro" class="inputWithPicto" :class="isProspect ? 'border-prospect' : 'border-client'" name="PM_tel_pro" v-on:blur="validatePhone('PRO')"  :disabled="isClientBanque" v-model="telephonePro" />
        <div class="validation-container" v-if="telephoneProControls.showPictoControl">
            <div v-if="telephoneProControls.isLoading" class="loader-control"></div>
            <span v-else class="span-validation-icon">
                <img @click="validatePhone('PRO')" :src="telephoneProControls.statut !== 'VALIDE' ? (telephoneProControls.statut === 'NC' ? require(`Images/shared/control-nc.png`) : require(`Images/shared/control-ko.png`)) : require(`Images/shared/control-ok.png`)" />
            </span>
        </div>
    </div>

代码背后的逻辑是使用 API http 调用验证电子邮件和电话的输入，并在输入中显示绿色检查或红叉（加载程序等待）。

在屏幕截图上，验证电子邮件的输入工作正常并正确触发了模糊事件（在链接的输入中显示验证或错误图片和加载程序），但电话号码输入对模糊事件没有反应（http 请求在 onBlur 上发送）电子邮件字段，但从不在电话字段中）所有输入都适用于桌面、iOS 设备 >= 13、Android >= X（发生错误时未找到目标版本）

堆栈：VueJS2，axios

【问题讨论】：

Here is the code - 不，这是一张代码图片，与根据要求简单地将代码粘贴到问题中相比，创建它需要更长的时间
@JaromandaX 已编辑，谢谢

标签： javascript android ios vue.js onblur

【解决方案1】：

看来问题出在 validatePhone 方法中，在该方法中，我将 '+' 替换为 '00' 与 regex 和 replaceAll。在某些设备（浏览器版本）上，s.replaceAll(xxxx) 不是函数

【讨论】：