htmlinput_1">原生html写input

通过oninput事件实现

<!-- html -->
<input type="text" id="phoneNumber" oninput="formatPhoneNumber(this)" /><script>function formatPhoneNumber(phoneInput) {var number = phoneInput.value.replace(/\D/g, ''), // 获取输入框中的纯数字formattedNumber = '';if (number.length > 0 && number.length <= 3) {formattedNumber = number} else if(number.length <= 8) {formattedNumber = number.replace(/^(\d{3})(\d{4})/, '$1-$2');} else {// 根据电话号码的长度，动态添加分隔符formattedNumber = number.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1-$2-$3');}// 更新输入框的值phoneInput.value = formattedNumber;
}
</script>

vue写input

通过使用计算属性(computed)和方法(methods)来实现电话号码的格式化显示

<template><div id="app"><inputtype="tel"maxlength="13"v-model="formattedPhone"@input="updatePhone($event.target.value)"/></div>
</template><script setup>
import { ref, computed } from 'vue';const phone = ref('');
const formattedPhone = computed({get() {// 当需要显示值时，格式化电话号码return phone.value.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1-$2-$3');},set(value) {// 当输入框的值改变时，更新phone的值phone.value = value.replace(/[^0-9]/g, '');}
});function updatePhone(value) {// 当输入改变时，更新formattedPhone计算属性formattedPhone.value = value;
}
</script>

uview-plus input组件

通过input 的formatter 实现

<up-input v-model="phone" placeholder="请输入" border="none"color="#262626"fontSize="28rpx"type="number"clearableplaceholderStyle="font-size:28rpx;"maxlength="13":formatter="formatter":customStyle="{'font-weight': 500}"></up-input><script setup>
import { ref, computed } from 'vue';const phone = ref('');
function formatter(value) {const cleaned = (value || '').trim();if(cleaned.length <=3) {return cleaned} else if(cleaned.length <= 8) {return cleaned.replace(/^(\d{3})(\d{4})/, '$1-$2');} else {// 根据电话号码的长度，动态添加分隔符return cleaned.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1-$2-$3');}
}
</script>