带输入掩码的拨号盘表单

时间:2016-07-18 01:12:57

标签: javascript jquery html forms

我拼凑了一个拨号盘表单,当单击表单按钮时,会将值添加到文本字段中,用作电话号码。我试图在文本字段中添加一个掩码,格式化为数字,如(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="">&nbsp;</button>
<button type="button" class="number" value="0">0</button>
<input type="submit" id="dial" value="GO"/>

</form>

0 个答案:

没有答案