我正在使用http://digitalbush.com/projects/masked-input-plugin/的输入掩码
<script type="text/javascript" src="jquery.maskedinput.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$("#transaction_id").mask("(999) 999-9999");
$("#transaction_id").on("blur", function() {
var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );
if( last.length == 3 ) {
var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
var lastfour = move + last;
var first = $(this).val().substr( 0, 9 );
$(this).val( first + '-' + lastfour );
}
});
});
</script>
我的输入字段:
<form role="search" class="navbar-form navbar-left" id="form2" name="form2"
autocomplete="off" autocorrect="off" method="post" action="<?php echo $editFormAction; ?>">
<div class="form-group">
<label for="input">Scan Receipt, ID or Type Phone Number</label>
<div class="input-group">
<input type="text" name="transaction_id" id="transaction_id" class="form-control"
placeholder="receipt, ID or phone" autofocus>
<input type="hidden" id="activity_id" name="activity_id"
value="<?php echo $_GET['recordID']; ?>" />
<input type="hidden" name="MM_insert" value="form2" />
<span class="input-group-btn">
<button type="submit" id="Submit" name="Submit" class="btn btn-default"
onclick="this.disabled = true; this.value = 'Saving...';
this.form.submit();"><span class="glyphicon glyphicon-search"></span> Redeem Ticket</button>
</span>
</div>
</div>
</form>
</div>
我的输入字段需要一个10位数的收据号码(例如W2GT7HR114)或一个电话号码(999)999-9999 . 当我需要输入电话号码时,想要切换输入字段,以便电话号码输入值具有电话输入掩码 . 需要一些帮助,如何添加切换按钮以显示输入掩码或隐藏 . 也希望占位符显示为(999)999-9999时切换vs“收据,ID或电话” . 任何帮助,将不胜感激 .
1 回答
我编辑了您的示例(请注意:这不是解决方案 - 这可能只是帮助您实现目标的第一步):
HTML:
还有一点css :-)
和jsFiddle:https://jsfiddle.net/sm4n6kkj/(请检查你的Mask库是否已加载 - 适用于Firefox - 但不适用于chrome - 这不是问题,因为你的库保存了本地)