将输入中的数字屏蔽为特殊字符 (*)

2024-02-13

我试图将 SSN 字段中的所有数字屏蔽为 *,同时让用户仅输入数值并用破折号格式化 SSN。

这是一个小提琴链接:

https://jsfiddle.net/7f8p83am/ https://jsfiddle.net/7f8p83am/

$('#ssn').keyup(function() {
    var val = this.value.replace(/\D/g, '');
    var newVal = '';
    var sizes = [3, 2, 4];
    var maxSize = 10;

    for (var i in sizes) {
      if (val.length > sizes[i]) {
        newVal += val.substr(0, sizes[i]) + '-';
        val = val.substr(sizes[i]);
      } else { 
        break; 
      }       
    }

    newVal += val;
    this.value = newVal;  
});   

显然,替换是去掉*。关于如何做到这一点有什么想法吗?

提前致谢。


您可以考虑删除输入的所有非数字和星号,并用 asterisk 替换数字:

// Remove all non-digits/asterisks and replace digits with asterisks
var val = this.value.replace(/[^\d\*]/g, '').replace(/\d/g,'*');

此外,您可能想尝试添加maxlength元素上的属性也可防止其继续:

<input id='ssn' maxlength='11'/>

最后,您可能需要考虑存储一个隐藏字段或变量来存储您正确的 SSN 值,以便您可以按预期将其发布到服务器。

Example

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <input id='ssn' maxlength='11' />
  <script>
    $(function() {
      $('#ssn').keyup(function() {
        var val = this.value.replace(/[^\d\*]/g, '').replace(/\d/g, '*');
        var newVal = '';
        var sizes = [3, 2, 4];
        var maxSize = 10;

        for (var i in sizes) {
          if (val.length > sizes[i]) {
            newVal += val.substr(0, sizes[i]) + '-';
            val = val.substr(sizes[i]);
          } else {
            break;
          }
        }

        newVal += val;
        this.value = newVal;
      });
    });
  </script>
</body>

</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将输入中的数字屏蔽为特殊字符 (*) 的相关文章

  • Blueimp jQuery 文件上传,传递额外的表单数据

    我可以使用一些帮助 我已经设法使 blueimp jQuery 文件上传为我工作 但我仍然绝对是一个新手 我对 jQuery 等知之甚少 所以请尝试将其清晰明了地提供给我尽可能简单 我会尝试具体一点 好的 我想实现的是人们可以上传照片 并为
  • 如何更改引导弹出窗口箭头边框颜色而不填充它?

    我想更改弹出箭头的边框颜色 当我应用边框颜色时 箭头本身填充了颜色 我只想为弹出框主体的箭头边框提供颜色 p Click on button to see Popover p a href class btn btn primary pop
  • Rails 4 - 带有 dependent-fields-rails 的条件 JS

    我正在尝试弄清楚如何在我的 Rails 4 应用程序中使用 dependent fields rails gem 我迷路了 我已将 underscore js 包含在我的供应商 javascripts 文件夹中 并更新了我的 applica
  • Google 地图 v3 中标准缩放控件的样式

    有没有一种简单的方法可以在 Google Maps JavaScript API v3 中设置缩放控件的样式 我想要的只是改变标准图像 http maps gstatic com intl en ALL mapfiles mapcontro
  • 单击react.js 切换列表的背景颜色

    我正在尝试创建一个具有以下功能的列表 悬停时更改列表项的背景颜色 单击时更改列表项的背景颜色 在单击的元素之间切换背景颜色 即列表中只有一个元素可以具有 clicked 属性 我已经执行了 onhover 1 和 2 功能 但无法实现第三个
  • 如何在 jQuery 中检查复选框是否被选中?

    我需要检查checked复选框的属性 并使用 jQuery 根据选中的属性执行操作 例如 如果age复选框被选中 然后我需要显示一个文本框来输入age 否则隐藏文本框 但下面的代码返回false默认情况下 if isAgeSelected
  • Javascript / jQuery - 转换特殊 html 字符

    我有一个pre元素中包含一些 html 代码 该代码中有特殊字符 例如 lt 所以它不会破坏页面 然后我有一个 javascript 函数 它获取此 pre 元素的内容 突出显示它 使用 codemirror 并用突出显示的文本替换元素内容
  • jQuery - 检测鼠标是否静止?

    我想知道是否有一种方法可以检测 jQuery 中鼠标是否空闲了 3 秒 是否有我不知道的插件 因为我不相信有一个原生的 jQuery 方法 任何帮助将非常感激 您可以收听mousemove事件 每当发生时启动超时并取消任何现有超时 var
  • 如何使用 Jquery 将列表项追加到列表的第一个位置

    如何使用 Jquery 将列表项追加到列表的第一个位置 ul li First li li Second li li Third li li Fourth li ul 是否可以在第一个之前附加一个列表项 li 用jquery 我试着 myl
  • Bootstrap:使用单个选项卡导航控制多个选项卡面板

    我想用一个选项卡导航来控制两个不同的选项卡内容 在 Bootstrap 3 中 我有一个使用逗号分隔数据目标的解决方案 如本例所示 https stackoverflow com a 19719859 1788961 https stack
  • 如何删除事件监听器?

    下面是我的事件监听器代码 window addEventListener beforeunload function e if sessionStorage token abide call api 如果我想删除这个事件监听器 我该怎么办
  • jqgrid 在编辑框中选择不正确的下拉选项值

    我正在使用表单编辑 表单中有两个选择框 一个选择框是国家 地区 另一个选择框是州 州选择框取决于所选的国家 地区 并将动态填充 例如 Country 美国 期权价值 1 英国 期权价值 2 美国的状态 阿拉巴马州 选项值 1 加利福尼亚州
  • 标点符号加载“动画”,javascript?

    我正在寻找一种好方法来显示一些标点符号加载 动画 我想要的是这样的 This will display at second 1 Waiting for your input This will display at second 2 Wai
  • 使用什么事件来在选择文本框中的值时显示警报消息

    我正在使用 jquery 的自动完成 api 来从数据库中获取名称 但是我想在从显示的文本框中选择名称时显示一条警报消息 我将显示一个图像以便更好地理解 当我输入 S 时 它将显示所有包含 S 的记录 所以问题是 如果我选择例如 Spars
  • 如何在 jQuery 中使用 CSS“background-image”属性添加的图像上绑定单击事件

    这是我的小提琴link http jsbin com otisur 1 edit 我想我的问题通过标题本身就很清楚了 尽管如此 我正在寻找一种绑定的方法click使用 css 添加的图像上的事件background image财产 我知道
  • JavaScript:参数列表后缺少 )

    这个 JavaScript 产生一个错误 参数列表后缺少 在 firebug 中使用代码 我究竟做错了什么 功能d缺少左括号 answer after 不应该逃避 只需常规报价即可
  • 使用 jQuery 的 javascript 关联数组长度

    我正在使用 javascript 关联数组 例如 var testarray testarray one 1 testarray two 2 testarray three 3 我也在旁边使用jquery 如何使用 jquery 或任何其他
  • 有一个带有复选框的 jsTree,如何禁用所有复选框?

    我有一个动态构建的 jsTree 它允许用户选择他选择的任何节点 现在我试图使这棵树只读 以便其他用户可以看到信息而不改变它 我找到的所有示例都是关于禁用特定节点 我的问题是 有没有办法将树上的所有复选框定义为只读 正在使用的代码 jQue
  • 使用jquery和coldfusion cffile上传多个文件

    不是一个真正的问题 只是想将其发布在某个地方 因为我在其他地方找不到它 现在我已经拼凑了一个工作演示 我想我会分享 这在 Coldfusion 和 Railo CFML 服务器上同样有 效 问题是 对于 CFML 开发人员来说 CFFILE
  • 如何在 jQueryUI 工具提示中换行

    新版本的 jQueryUI 1 9 附带了本机工具提示小部件 经过测试 如果内容 标题属性的值 很短 它就可以正常工作 但如果内容很长 工具提示一旦显示就会与输入文本重叠 有a demo http jqueryui com tooltip

随机推荐