时间戳

首页 > 解决方案 > Jquery Mask 不使用插件初学者

javascript - Jquery Mask 不使用插件初学者

问题描述

我想制作一个输入类型掩码 __/__ 只有数字可以在不使用任何插件的情况下输入纯 jquery 任何提示？

另一个问题：例如用户将输入 3，输出显示将是 3/9，（/9）将在那里并且不可编辑，因为 9 将是最大页数，这可能实现吗？

标签： javascriptjquery

解决方案

据我了解，您的问题是如何执行以下操作：

  1. 掩码输入字段

  2. 输入字段只能接受number

所以我做了以下步骤：

  1. 将输入字段设为password类型。

  2. 键入时检测字符中的键（keypress在值更改之前完成），然后当字符不是数字时不要更改现有值。

我添加了一个按钮，您可以单击它来显示当前值。

$('#in').keypress(function(event){
  var reg = /[0-9]/g;
  var key = String.fromCharCode(event.keyCode);
  if(!reg.test(key))
    return false;
})

$('#show').click(function(event){
  alert($('#in').val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="in" type="password"/>

<br />

<button id="show">Show Value</button>

更新

下面是这个插件完成的一个例子。

这可能满足您的要求。

$('#inputtext').securenumbermask({mask:'_',maxlength:15});

$('#show').click(function(event){
  alert($('#inputtext-original').val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Mask-Numbers-In-Text-Field-Secure-Number-Mask/js/securenumbermask.js">
</script>

<input class="form-control" type="text" id="inputtext" value="123" input-original="inputtext-original">

<input id="inputtext-original" type="hidden" value="**">

<br />

<button id="show">Show Value</button>

推荐阅读