首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何屏蔽输入文本框中输入的每三位数字。单击提交按钮时,必须显示原始的未屏蔽值

在前端开发中,可以通过以下步骤来实现屏蔽输入文本框中每三位数字的功能,并在单击提交按钮时显示原始的未屏蔽值。

  1. HTML结构:在页面中创建一个文本框和一个提交按钮。
代码语言:txt
复制
<input type="text" id="inputField" />
<button onclick="submitForm()">提交</button>
  1. JavaScript代码:使用JavaScript监听文本框的输入事件,并在每次输入后处理输入的值。在处理时,可以通过正则表达式替换文本框的值,将每三位数字替换为屏蔽字符,如"*"。
代码语言:txt
复制
function submitForm() {
  var inputField = document.getElementById("inputField");
  var originalValue = inputField.value;

  // 使用正则表达式替换每三位数字为屏蔽字符
  var maskedValue = originalValue.replace(/\d{3}/g, "***");

  // 显示原始的未屏蔽值
  alert(originalValue);

  // 可以将屏蔽后的值设置回文本框
  // inputField.value = maskedValue;

  // 在此处可以执行其他提交表单的操作
}

这段代码中,submitForm函数用于处理点击提交按钮的操作。首先获取文本框的值originalValue,然后使用正则表达式替换每三位数字为屏蔽字符,生成maskedValue。接下来通过弹窗alert显示原始的未屏蔽值,也可以将屏蔽后的值设置回文本框。在最后的注释部分,你可以执行其他提交表单的操作。

这是一种简单的实现方式,可以根据实际需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

input标签type属性汇总

需要注意是,在定义单选按钮必须为同一组选项指定相同name,这样“单选”才会生效。此外,可以对单选按钮应用 checked属性,指定默认选中项。...6.提交按钮 提交按钮是表单核心控件,用户完成信息输入后一般都需要单击提交按钮才能完成表单数据提交。...16 number类型 number类型 <input/标记用于提供输入数值文本框。在提交表单,会自动检查该输入内容是否为数字。...如果输入内容不是数字或者数字不在限定范围内则会出现错误提示。 number类型输入框可以对输入数字进行限制,规定允许最大和最小、合法数字间隔或默认等。具体属性说明如下。...简单地说,UTC时间就是0时间。例如,如果北京时间为早上8点,则UTC时间为0点,即UC时间比北京时间晚8小。 注意:对于浏览器不支持标记输入类型,则会在网页显示为一个普通输入框。

3.3K10

表单

一.表单    表单就是一个将用户信息组织起来容器:           1.表单内容:       ...元素输入最大字符数,默认无限大     checked        此属性用于指定按钮是否被选中。...设置了type属性后在密码框输入字符全都是以黑色实心显示,从而实现对数据处理 单选按钮   用户只能选中一个单选按钮在使用单选按钮,需要一个显示...="email"/> url   用于输入URL地址这类特殊文本文本框提交表单如果输入不是uil地址格式文本,将不允许提交表单 数字   number   用于提供数字文本框我们可以对数字进行控制包括最大,最小合法间隔或默认,如果所输入数字不在限定范围之内,   则会出现错误提示。

4.7K90
  • Citrix实施问题及解决方法系列-3

    答:服务器操作系统是windows2003 ,可以 a) 在开始-运行输入gpedit.msc打开“组策略”; b) 在“计算机配置”-“管理模板”-“windows 组件”-“终端服务”-“会话...”上,双击“允许仅从原始客户端重现连接”; c) 单击“已启用”,然后单击“确定”。...答:首先检查Windows权限设置方面是否存在问题,若没问题,则看看发布应用程序名称是否采用了中文名称,更改为英文或数字组合即可。4.5版显示应用名称可使用中文,4.0版不行。...答:安装指定主机名是小写,即使输入时看起来是大写,实际上仍然是小写,需要在安装Win2003完成后,参照10方法再次修改主机名才可以。 12、如何更改主机名?...答:经分析,4.0以上版本显示“正在连接”,实际上是会先连接服务器2598端口,然后才会连接原来1494端口,因此导致速度非常慢。要加速就需要屏蔽客户端对该端口连接尝试。

    1.3K20

    Excel编程周末速成班第21课:一个用户窗体示例

    技巧:你可以通过设置其MaxLength属性将txtZip文本框数据限制为5个字符,尽管在此项目中执行此操作。...If End Sub 注意:如清单21-2所示,文本框仅接受在键盘顶部输入数字,而不接受使用数字键盘输入数字。...修改代码使之也可以接受数字键盘输入是一个很好编程练习。 步骤5:编写数据验证代码 当用户单击“下一步”或“完成”按钮,验证代码将检查数据。...如果验证成功,则将数据输入工作表,并清除窗体且再次显示该窗体以供其他输入。或者,如果选择了“完成”按钮,则关闭窗体。你可以看到,当用户单击“下一步”或“完成”按钮,将执行验证。...当然,在单击“下一步”按钮,这是必需,在单击“取消”或“完成”按钮,这也是必需。即使使用Hide方法隐藏了该窗体,它在下次显示仍将所有数据保留在其控件。因此,需要清除控件。

    6.1K10

    注册型网站设计阶段总结

    匹配前面的子表达式零次或一次; \d 匹配一个数字字符,等价于[0-9]; * 匹配前面的子表达式零次或多次; 不同选项之间有关联动态对应性 比较麻烦,以后会单独研究一下 空检测 全空格或回车定性为空特性...,注册,更改时 这是对于文本框信息进行检验一个步骤,当我们进行输入时,应该把空格全部去掉,无论是提交用户名也好,还是一串查询信息也好 空格对于后代数据库处理其实都是无用,所以要进行过滤,使用方法...: var xxx = inputname.trim();//假设已经获得了input框,并且把它赋值给了inputname 这样可以把输入文本框字符空格给去掉 再者,如果对于”输入不为空...“这个条件进行检测,那么输入一串空格将是必须,上述trim()可以吧字符串去掉空格字符,当然对于一串 空格,处理后就会是空,即上述方法就可以完成。...必填判断 哪个必须输入,哪个不用提交判断 这是对于有多项注册项目的网站来说,比如12306注册,有一二十项,但是必须可能也就那几项,我们会在表格后面紧跟红星*等等方法标记 具有注册后更改页面的实现

    2.6K30

    Google Earth Engine(GEE)——实现 LandTrendr 光谱-时间分割算法指南

    另请注意,当您单击地图上一个点,该点坐标将填充这些输入框。 定义 LandTrendr 分段参数。有关定义,请参阅LT 参数部分。 单击地图上某个位置或点击提交按钮。...如果您想更改有关运行任何内容,但保留您单击坐标,只需进行更改,然后点击提交按钮 - 单击位置坐标将保存到像素坐标输入。...等待一两分钟,您选择所有指数源和 LandTrendr 拟合时间序列数据图都会出现。下次单击某个点或提交输入时,将清除所有当前绘图并显示绘图集。...另请注意,当您单击地图上一个点,该点坐标将填充这些输入框。如果您选择输入坐标,则必须在选择所有选项后单击控制面板底部提交按钮以生成地图。...单击地图或点击提交按钮绘制地图 - 等待几分钟以完成该过程。

    99321

    JavaScript 高级程序设计(第 4 版)- BOM

    没有效果,还可能向用户显示错误 弹窗通常可能在鼠标点击或按下键盘某个键情况下才能打开 弹窗屏蔽程序 所有现代浏览器都内置了屏蔽弹窗程序,因此大多数意料之外弹窗都会被屏蔽 // 如果浏览器内置弹窗屏蔽程序阻止了弹框...,用户通过单击不同按钮表明希望接下来执行什么操作,根据confirm()方法返回判断点击项,true->OK、false->Cancel prompt():提示用户输入消息 接收两个参数:要显示给用户文本...,以及文本框默认 如果用户单击了 OK 按钮,则 prompt()会返回文本框。...如果用户单击了 Cancel 按钮,或者对话框被关闭,则 prompt()会返回 null find()和print(): 这两种对话框都是异步显示,即控制权会立即返回给脚本 显示查找对话框或打印对话框...否则,单击“刷新”按钮会导致 404 错误。所有单页应用程序( SPA, Single Page Application)框架都必须通过服务器或客户端某些配置解决这个问题。

    1.2K10

    使用管理门户SQL接口(一)

    单击所需用户名称。这允许编辑用户定义。从“常规”选项卡,从下拉列表中选择“启动命名”空间。单击“保存”。如果选择启动命名空间,则会默认为%SYS.。...在Show Plan语句文本显示或缓存查询显示注释。返回多个结果集查询。在文本框编写SQL代码后,可以单击显示计划”按钮查看SQL代码而不执行SQL代码。...选项是显示模式(默认),ODBC模式和逻辑模式。具有插入或更新选择模式下拉列表允许指定输入数据是否将从显示格式转换为逻辑存储格式。对于此数据转换,必须使用选择运行时选择模式编译SQL代码。...请注意,下次访问管理门户,选择方言将成为用户自定义默认语言。行号:一个复选框,指定是否在结果集中显示一行包含行计数号。 行号是分配给结果集中一行连续整数。...SQL语句结果在“执行查询”文本框编写SQL代码之后,可以通过单击“执行”按钮来执行代码。这要么成功执行SQL语句并在代码窗口下面显示结果,要么SQL代码失败。

    8.3K10

    180多个Web应用程序测试示例测试用例

    26.如果允许数字字段,请检查是否为负数。 27.检查带有十进制数字字段数。 28.检查所有页面上可用按钮功能。 29.用户不能连续快速按下提交按钮来两次提交页面。...6.说明文本框应为多行。 7.禁用字段应显示为灰色,并且用户不应将重点放在这些字段上。 8.单击输入文本字段后,鼠标箭头指针应变为光标。 9.用户应该不能输入下拉选择列表。...10.当页面提交上出现错误消息,用户填写信息应保持不变。用户应该能够通过更正错误再次提交表单。 11.检查错误消息是否使用了正确字段标签。 12.下拉字段应按定义排序顺序显示。 13....3.当执行搜索操作至少需要一个过滤条件,请确保在用户提交页面选择任何过滤条件显示正确错误消息。...在页面上和数据库模式显示给用户字段长度应该相同。 16.检查具有最小,最大和浮点数字字段。 17.检查带有负值数字字段(接受和不接受)。

    8.3K21

    JavaScript(十三)

    重置表单 在用户单击重置按钮,表单会被重置。使用 type 特性为 “reset” input 或 button 都可以创建重置按钮,如下: <!...用户单击重置按钮重置表单,会触发 reset 事件,利用这个机会,我们可以在必要时取消重置操作。 表单字段 可以像访问页面其他元素一样,使用原生 DOM 方法访问表单元素。...value 改变触发,对于 select 元素,在其选项改变触发 文本框脚本 ---- 在 HTML,有两种方式来表现文本框: 使用 input 元素单行文本框 使用 textarea 元素多行文本框...而通过设置 size 特性,可以指定文本框能够显示字符数。通过 value 特性,可以设置文本框初始,而 maxlength 特性则用于指定文本框可以接受最大字符数。...,而 “url” 类型要求输入文本必须符合 URL 模式。

    3.3K20

    手机APP测试(测试点、测试流程、功能测试)

    文本框按钮等控件测试 文本框测试   如何文本框进行测试   a,输入正常字母或数字。   b,输入已存在文件名称;   c,输入超长字符。...例如在“名称”框输入超过允许边界个数字符,假设最多255个字符,尝试输入 256个字符,检查程序能否正确处理;   d,输入默认,空白,空格;   e,若只允许输入字母,尝试输入数字;反之;尝试输入字母...如,单击确定,正确执行操作;单击取消,退出窗口;   b,对非法输入或操作给出足够提示说明,如,输入月工作天数为32单击”确定“后系统应提示:天数不能大于31;   c,对可能造成数据无法恢复操作必须给出确认信息...分别选择了“男”“女”后,保存到数据库数据应该相应分别为“男”“女”;   c,一组执行同一功能单选按钮在初始状态必须有一个被默认选中,不能同时为空; 5. up-down控件文本框测试   ...a,直接输入数字或用上下箭头控制,如,在“数目”中直接输入10,或者单击向上箭头,使数目变为10;   b,利用上下箭头控制数字自动循环,如,当最多数字为253单击向上箭头,数目自动变为1;反之亦适用

    7.9K43

    VERICUT如何搭建车铣中心

    在“增量”文本框输入“30”,再单击右侧Z-按钮单击“组件属性”标签。在“刀具索引”文本框输入“3”,如图所示。 刀具部件定义加工刀具将要加载位置和方向。...⑤在“文本框输入“460,0,520”。单击“确定”按钮,如图所示。 (6)恢复机床并检查机床新初始位置。 选择“信息”>“状态”菜单命令,系统弹出状态窗口。...单击“打开”按钮,如图所示。 没有刀具部件模型。然而,刀具数据是通过刀具管理器刀具库文件调用。在车铣中心,全部刀具在程序开始加载。把刀具附属于不同刀具部件。...单击“打开”按钮,在配置模型窗口中单击“移动”标签。在“位置”文本框输入“0 0 107”。单击“移动”标签,在“位置”文本框输入“0 0 107”。...单击“旋转”标签,在“旋转中心”文本框输入“0 0 107”。单击显示旋转中心。在“增量”文本框输入“90”,单击右侧Y-按钮,如图所示。 (9)保存机床文件。

    3.3K40

    表单脚本

    focus:当前字段获取焦点触发 表单错误提示流程:利用focus事件修改文本框背景颜色,以便清楚表明这个字段获取了焦点;利用blur事件恢复文本框背景颜色;利用change事件在用户输入了非规定字符提示错误...(1)单行文本框 通过设置size特性,可以指定文本框能够显示字符数;通过设置value特性,可以指定文本框初始;通过设置maxlength特性,可以指定文本框可以接受最大字符数。 初始必须放在这里 上述两种文本框,都会将用户输入内容保存在value属性!!! 1....textbox.focus(); } 部分选择文本技术在实现高级文本输入很有用,例如提供自动完成建议文本框就可以使用这种技术。...过滤输入 (1)屏蔽字符 当需要用于输入文本不能包含某些字符,例如手机号,只能输入字符!

    4.8K41

    我看AutoEventWireup

    2.在AutoEventWireup为True情况下,不论输入任何数运行结果总是1+2=3,因为AutoEventWireup为True每次提交页面都会先执行行Page_Load方法,再执行控制事件方法...从表面看,就是Page_Load成了aspx.cs文件必须而且首先执行方法。那么如何解决呢?...下面加深一步思考:在Textbox1和Textbox2两个文本框中分别赋值1和2后,单击求和按钮,讲表单控件传送到服务器,Default.aspx.cs程序依次执行Page_Load方法和Button_Click...当再一次生成HTML网页,两个文本框应该会自动设置为初始(即空)状态,这就是Web无状态性,即Web不能够保存上次程序完成那些变量值,但是事实上这是的TextBox1和TextBox2两个文本框仍然显示单击求和按钮之前...=”hidden”>),在提交后,ASP.NET解析这个隐藏域,重新获取各控件状态,这样就能够保持Web控件状态不停地传递下来,这个过程有点像操作系统调用中断,将当时各寄存器状态都保存起来

    77230

    windows关闭端口方法「建议收藏」

    windows关闭端口方法 在介绍各种端口作用前,这里先介绍一下在Windows如何关闭/打开端口,因为默认情况下,有很多不安全或没有什么用端口是开启,比如Telnet服务23端口、FTP...接着在打开服务窗口中找到并双击“Simple Mail Transfer Protocol (SMTP)”服务,单击“停止”按钮来停止该服务,然后在“启动类型”中选择“已禁用”,最后单击“确定”按钮即可...在向导中点击“下一步”按钮,为新安全策略命名;再按“下一步”,则显示“安全通信请求”画面,在画面上把“激活默认相应规则”左边钩去掉,点击“完成”按钮就创建了一个新IP 安全策略。...第二步,右击该IP安全策略,在“属性”对话框,把“使用添加向导”左边钩去掉,然后单击“添加”按钮添加新规则,随后弹出“新规则属性”对话框,在画面上点击“添加”按钮,弹出IP筛选器列表窗口;在列表...第三步,进入“筛选器属性”对话框,首先看到是寻址,源地址选“任何 IP 地址”,目标地址选“我 IP 地址”;点击“协议”选项卡,在“选择协议类型”下拉列表中选择“TCP”,然后在“到此端口”下文本框输入

    18K22

    测试常见面试题(功能测试部分)

    4)允许回车换行、保存后再显示能够保存输入格式、仅输入回车换行,检查能否正确保存(若能,检查保存结果,若不能,查看是否有正常提示) 二、数字输入框: ①、边界:最大、最小、最大...参考答案: 1、是否支持回车 2、单击 3、快速双击, 可能会导致重复提交bug 4、网络中断 5、只输入必填项,单击提交 6、分别缺少一个必填项、单击提交(无效等价类不能合并) 7、所有字段最大长度...空链接是指指派链接,用户单击该链接不会指向任何内容。测试过程需要保证每个链接都已被指派。 (3)死链接。死链接指原来正常,后来失效链接。向死链接发送请求,服务器返回404错误。...● 内容太长, 文本框不能完全显示, 是否有未完全显 示提示?如加‘…’ ● 显示内容格式是否正确? 7.3 根据文本框状态 可编辑文本框与不可编辑文本框是否易于区分?...● 单击窗体‘确定’ 或‘保存’ 或‘提交按钮以后, 程序再检验数据正确性, 不正确就给出提示 要求重新输入

    1.6K20

    excel常用操作大全

    当你放开鼠标左键,一切都变了。 如果您在原始证书编号后添加19,请在B1单元格写入:=A1 '13 ',然后按回车键。 2.如何在文件下拉窗口底部设置最近运行文件名数量?...打开“工具”,选择“选项”,然后选择“常规”,并在“最近使用文件列表”下文件编号输入更改文件编号。如果菜单显示最近使用文件名,请取消“最近使用文件列表”前复选框。...9.如何快速定位格?单元 方法1:按F5显示“位置”对话框,在参考栏输入要跳转到单位格地址,在单市按“确定”按钮 方法二:点击编辑栏左侧格单元地址框,输入格单元地址 10....请注意,点击“选项”按钮后,格式列表框下有六个“应用格式类型”选项,包括“数字”、“边框线”和“字体”。如果没有选择一个项目,则在应用表格样式不会使用它。 18、如何快速复制单元格格式?...,然后单击“添加”按钮保存输入序列。当您将来使用它,只需输入张三,然后将光标指向单元格右下角填充手柄,并沿着要填充方向拖动填充手柄,您自定义序列就会出现。

    19.2K10

    Extjs-lesson4

    ; }; //提交按钮 //创建一个新Button按钮对象 var btnsubmit = new Ext.Button({ text: "提交", //当用户点击时候[即jsonclick...NumberField 3.2 代码 //创建一个NumberField数字文本框对象 var numberfield = new Ext.form.NumberField({ //文本框前面的显示文字...minValue: 0.01, //设置数字文本框最大 maxValue: 200, //这个是自己添加属性,属性添加可以参看重写文本框部分代码 unitText: " cm"...对应数据源 id 列;此属性必填 valueField: "id", //请设置为”all”,否则默认为”query”情况下,你选择某个后,再此下拉,只出现匹配选项。...而 all 则每次都显示全部 triggerAction: "all", //显示提示信息 emptyText: "请选择...

    4.8K10
    领券