我拼凑了一个拨号盘表单,当单击表单按钮时,会将值添加到文本字段中,用作电话号码。我试图在文本字段中添加一个掩码,格式化为数字,如(123)456-7890,但单击按钮时似乎无法正常工作(仅适用于按键)。有没有办法强制将字段格式化为数字?
似乎无法让蒙版在这里工作,但有一个实例: http://www.aljphoto.com/dialpad/testmask.html
var phoneScreen = $("#phone"); var phoneNumber = phoneScreen.val();
var delBtn = $("#del"); var clrBtn = $("#clr");
var numBtn = $(".number");
numBtn.click(function() {
var number = $(this).val();
updatePhoneNumber(number);
printPhoneNumber();
});
delBtn.click(function() {
deleteNumber();
printPhoneNumber();
});
clrBtn.click(function() {
clearNumber();
printPhoneNumber();
});
function updatePhoneNumber(newNumber) {
phoneNumber = phoneNumber + newNumber;
}
function deleteNumber() {
phoneNumber = phoneNumber.slice(0,-1);
}
function clearNumber() {
phoneNumber = "";
}
function printPhoneNumber() {
phoneScreen.val(phoneNumber);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://forkcast.io/loyalty/pizza-republic/js/jquery.SimpleMask.js"></script>
<form action="#" method="post" id="form">
<input type="text" id="phone" placeholder="(123) 456-7890" style="height:50px;width:250px;margin:5px;font-size:20px;padding-left:5px;"/>
<br /><br />
<button type="button" class="number" value="1">1</button>
<button type="button" type="button" class="number" value="2">2</button>
<button type="button" type="button" class="number" value="3">3</button>
<br />
<button type="button" type="button" class="number" value="4">4</button>
<button type="button" type="button" class="number" value="5">5</button>
<button type="button" type="button" class="number" value="6">6</button>
<br />
<button type="button" type="button" class="number" value="7">7</button>
<button type="button" type="button" class="number" value="8">8</button>
<button type="button" type="button" class="number" value="9">9</button>
<br />
<button type="button" id="del" class="del" value="del" style=""> </button>
<button type="button" class="number" value="0">0</button>
<input type="submit" id="dial" value="GO"/>
</form>