javascript - 切换功能以更改输入掩码

Question

我正在使用 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 形式的电话号码。当我需要输入电话号码时想要切换输入字段，以便电话号码输入值具有电话输入掩码。需要一些有关如何添加切换按钮以显示或隐藏输入掩码的帮助。还希望占位符在切换与“收据、ID 或电话”时显示为 (999) 999-9999。任何帮助将不胜感激。

Answer 1

我编辑了您的示例(请记住:这不是解决方案 - 这可能只是实现您目标的第一步):

$(document).ready(function() {

  $.mask.definitions['h'] = "[A-Z0-9]";
  $(".reciepid").mask("hhhhhhhhhh").attr('placeholder', 'W2GT7HR114');

  $('.toggle').click(function() {
    $("#transaction_id").toggleClass('reciepid phone');
    $("#transaction_id").val('');
    $(".reciepid").mask("hhhhhhhhhh").attr('placeholder', 'W2GT7HR114');
    $(".phone").mask("(999) 999-9999").attr('placeholder', '(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);
  }
});
});

HTML:

<div>
  <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">
      <span class="toggle">toggle</span>
      <input type="text" name="transaction_id" id="transaction_id" class="form-control reciepid" 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>

还有一点 CSS :-)

.toggle {
  display: inline-block;
  background: grey;
  border-radius: 5px;
  border: 1px solid #000;
  padding: 5px;
}

和 jsFiddle :https://jsfiddle.net/sm4n6kkj/ (请检查您是否已加载 Mask 库 - 适用于 Firefox - 但不适用于 chrome - 这不是问题，因为您已将库保存在本地)