首页 > 软件开发 > JavaScript >

如何去除input 的逗号

来源:互联网 2023-03-16 23:58:23 版权归原作者所有,如有侵权,请联系我们

如何去除input值中的逗号?有时在编写网页时,我们需要对input标签的值进行过滤,去除其中的逗号,那么应该如何操作呢?下面,小编来详细给大家介绍一下去除input 标签值中逗号的方法,希望能对大家有所帮助。GOs办公区 - 实用经验教程分享!

如何去除input 的逗号GOs办公区 - 实用经验教程分享!

方法/步骤

  • 1

    为了方便进行讲解,我们首先来编写一个演示用的网页文件:主要包含一个文本框和一个按钮。同时将代码放在下面,以方便大家拷贝进行测试。GOs办公区 - 实用经验教程分享!

    代码如下:GOs办公区 - 实用经验教程分享!

    html>GOs办公区 - 实用经验教程分享!

    head>GOs办公区 - 实用经验教程分享!

    meta charset="utf-8">GOs办公区 - 实用经验教程分享!

    title>演示网页/title>GOs办公区 - 实用经验教程分享!

    /head>GOs办公区 - 实用经验教程分享!

    body>GOs办公区 - 实用经验教程分享!

    center>GOs办公区 - 实用经验教程分享!

    文本: input type="text" id="myname" >GOs办公区 - 实用经验教程分享!

    br>br>GOs办公区 - 实用经验教程分享!

    input type="button" value="删除逗号" >GOs办公区 - 实用经验教程分享!

    /center>GOs办公区 - 实用经验教程分享!

    /body>GOs办公区 - 实用经验教程分享!

    /html>GOs办公区 - 实用经验教程分享!

    效果如下图:GOs办公区 - 实用经验教程分享!

    如何去除input 的逗号GOs办公区 - 实用经验教程分享!

  • 2

    想定的情景是:点击按钮后,对文本框中的值进行过滤,删除值中的逗号,并将过滤后的新值赋给文本框。GOs办公区 - 实用经验教程分享!

    首先,现在我们来为按钮添加一个onclick事件,事件响应的函数为delSubstr()。GOs办公区 - 实用经验教程分享!

    修改按钮代码如下:GOs办公区 - 实用经验教程分享!

    input type="button" value="删除逗号" onclick="delSubstr();">GOs办公区 - 实用经验教程分享!

    如何去除input 的逗号GOs办公区 - 实用经验教程分享!

  • 3

    再来编写javascript脚本的delSubstr()函数,功能是删除文本框的值逗号,并将新值重新赋给文本框,主要代码如图所示:GOs办公区 - 实用经验教程分享!

    如何去除input 的逗号GOs办公区 - 实用经验教程分享!

  • 4

    其中表达式str.replace(/,/g,"")是关键代码,replace函数实现字符替换功能,第一个参数是要查找的字符串,这里"/,/g"用了正则表达式,表示查找字符中的所有“,”,第二个参数是替换成的内容,这里“”表示替换成空,即删除查找到的字符串。GOs办公区 - 实用经验教程分享!

    如何去除input 的逗号GOs办公区 - 实用经验教程分享!

  • 5

    除了利用按钮单击来过滤逗号,我们更多的是想input标签能够实现自动过滤。 那么我们可以通过给input标签添加onblur事件来实现,具体代码如下图所示:GOs办公区 - 实用经验教程分享!

    如何去除input 的逗号GOs办公区 - 实用经验教程分享!

  • 5此文章未经授权抓取自百度经验
  • 6

    保存后,在浏览器中打开效果如下图所示,当文本框失去焦点后,会自动过滤文本中的逗号。GOs办公区 - 实用经验教程分享!

    如何去除input 的逗号GOs办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!GOs办公区 - 实用经验教程分享!


    标签: 编程语言JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号