我是新手Vue.js开发者,正在尝试找到一种方法如何在输入框中格式化电话号码为所需格式。我能在stackoverflow上找到一个使用纯javascript编写的答案,但我不知道如何在Vue中使用正则表达式。
javascript解决方案
所以我的问题是如何将它应用在这个输入div上?这样用户只能键入数字,并且当他正在输入数字时,数字会以所需格式显示。
javascript解决方案
document.getElementById('phone').addEventListener('input', function (e) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});
所以我的问题是如何将它应用在这个输入div上?这样用户只能键入数字,并且当他正在输入数字时,数字会以所需格式显示。
<div contentEditable="true" class="inputDiv"></div>
我希望使用vue.js实现以下示例。
document.getElementById('phone').addEventListener('input', function (e) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});
<input type="text" id="phone" placeholder="(555) 555-5555"/>
我在尝试寻找一个可能非常简单的答案,但由于我对Vue不熟悉,因此无法找到任何可以帮助我使其正常工作的内容。