js 手机号实现(344)  下面有将正则验证去掉“-” 或“空格”  下一篇博客有单独的删除功能方法

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>aaa</title>

</head>

<body>

    <input type="tel" id="phone" onfocus="getCursortPosition(this);" onclick="getCursortPosition(this);" onkeyup="format(this);" maxlength="13"/>

    <script>

        var CaretPos = -1;

        var numLength = 0;

        function valid(value){

            if(value && !/^\d{0,25}$/g.test(value)){

                return value.replace(/[^0-9]/ig, '');

            }

            return value;

        }

        function format(obj){

            var value=valid(obj.value);

            value=value.replace(/\s*/g,"");

            var result=[];

            for(var i=0;i<value.length;i++){

                if(i==3 || i==7){

                    result.push("-"+value.charAt(i)); //双引号里减号 可替换

                }else{

                    result.push(value.charAt(i));

                }

            }

            obj.value=result.join("");

            if(obj.value.length < numLength){

                if(CaretPos == 10 || CaretPos == 5){

                    CaretPos -= 2;

                } else {

                    CaretPos -= 1;

                }

                setCaretPosition(obj, CaretPos);

            }

            console.log(CaretPos);

            if(obj.value.length > numLength){

                if(CaretPos == 8 || CaretPos == 3){

                    CaretPos += 2;

                } else {

                    CaretPos += 1;

                }

                setCaretPosition(obj, CaretPos);  

            }

            numLength = obj.value.length;

        }

        function getCursortPosition (ctrl) {

            if (document.selection) {

                ctrl.focus ();

                var Sel = document.selection.createRange();

                Sel.moveStart ('character', -ctrl.value.length);

                CaretPos = Sel.text.length;

            }else if (ctrl.selectionStart || ctrl.selectionStart == '0')

                CaretPos = ctrl.selectionStart;

        }

        function setCaretPosition(ctrl, pos){

            if(ctrl.setSelectionRange)

            {

                ctrl.focus();

                ctrl.setSelectionRange(pos,pos);

            }

            else if (ctrl.createTextRange) {

                var range = ctrl.createTextRange();

                range.collapse(true);

                range.moveEnd('character', pos);

                range.moveStart('character', pos);

                range.select();

            }

        }

    </script>  

</body>

jq 实现银行卡没四个数加一个空格  下面有将正则验证去掉“-” 或“空格”

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>银行卡号4位空格</title>

  <script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script><!--依赖jquery-->

</head>

<body>

  <input type="tel" placeholder="请输入储蓄卡卡号" name="cardNum">

  <script>

   //监控input事件

    document.querySelector('input[name=cardNum]').addEventListener('input', function() {

        //获取当前光标位置

        var position = this.selectionStart;

        var v = this.value;

        //四个字符加一个空格

        this.value = v.replace(/\s/g, '').replace(/(.{4})/g, "$1 ");

        //优化语句：如果当前位置是空格字符，则自动清除掉

        if (this.value.charAt(this.value.length - 1) == ' ') {

            this.value = this.value.substring(0, this.value.length - 1);

        }

        var input = this;

        //重新定位光标位置，start和end都需要设置，不然就是截取片段了

        //countSpace此方法报错，但是不影响使用，我也没解决问题所在，求大神

        input.selectionStart = position + countSpace(this.value, position);

        input.selectionEnd = position + countSpace(this.value, position);

    })

  </script>

</body>

</html>

用正则验证去掉“-” 或“空格”

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<script type="text/javascript">

var str="187-5332 5214+1000"; // 假如这是你得到的字符串

// 下面进行替换

var str_rep = str.replace(/\+|\-|\s+|\*|\?/g,"");

console.log(str_rep);

// 不知道是不是你所说的那样

</script>

</head>

</html>

js jq 手机号实现(344) 附带删除功能 jq 实现银行卡没四个数加一个空格 附带删除功能的更多相关文章

  1. JS实现input中输入数字，控制每四位加一个空格（银行卡号格式）

    前言 今天来讲讲js中实现input中输入数字,控制每四位加一个空格的方法!这个主要是应用于我们在填写表单的时候,填写银行卡信息,要求我们输入的数字是四位一个空格!今天主要介绍两种方式来实现这个方法! ...

  2. js填写银行卡号，每隔4位数字加一个空格

    1.原生js写法 !function () { document.getElementById('bankCard').onkeyup = function (event) { var v = thi ...

  3. JS文本框每隔4个数字加一个空格，银行卡号文本框

    <input type="text" onkeypress="return (function(key,that){return (key>47&&a ...

  4. js 每隔四位加一个空格

    var str = '2016060520103600466'; var str=str.replace(/\s/g,'').replace(/(.{4})/g,"$1 "); a ...

  5. js银行卡四个数字一个空格

    !function () { document.getElementById('bankCard').onkeyup = function (event) { var v = this.value; ...

  6. jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  7. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  8. php相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子

    相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子包括五个部分: 一.相册首页 <html> <head> <meta charset="utf- ...

  9. 原生js实现一个简单的倒计时功能

    大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...

随机推荐

  1. 【jQuery Demo】图片切换效果整理

    图片的切换效果有很多,比较常见的有水平滚动.垂直滚动.淡入淡出等.我们接下来一一实现这些效果. 1.水平滚动 1) 我们先来实现HTML页面,代码很简单: <div id="conta ...

  2. jvm理论-运行时数据区

    三大流行jvm sun HotSpot ibm j9 BEA JRockit Oracle 会基于HotSpot整合 JRockit. jvm运行时数据区 java虚拟机所管理的内存将会包括以下几个运 ...

  3. Win10系统的SurfacePro4如何重装系统-3 重装完成之后的系统优化

    重装完成之后,还是有很多问题,比如触摸屏的驱动没了,你要接上去鼠标之后操作   由于Surface只有一个USB口,你接了鼠标,就没法接键盘,所以要开启屏幕的软键盘,右击任务栏,勾选显示触摸键盘按钮, ...

  4. 使用pyenv安装多个Python版本

    pyenv是一个便于使用多版本Python环境的工具 pyenv使用shell脚本编写的,只需要下载就可以使用了,不需要root用户,这个我比较喜欢. 具体介绍看网址:https://github.c ...

  5. 硬盘SMART检测参数详解[转]

    一.SMART概述        要说Linux用户最不愿意看到的事情,莫过于在毫无警告的情况下发现硬盘崩溃了.诸如RAID的备份和存储技术可以在任何时候帮用户恢复数据,但为预防硬件崩溃造成数据丢失所 ...

  6. CentOS7配置防火墙

    使用命令的方式配置 ##Add firewall-cmd --permanent --zone=public --add-port=/tcp ##Remove firewall-cmd --perma ...

  7. SharePonit online 列表表单定制

    1)在O365管理中心,确保启用了站点脚本定制,否则,网站不允许将页面切换到编辑模式. 2)Ribbon上,列表->表单web部件->编辑窗体 如果没有Ribbon,则到列表高级设置,启用 ...

  8. 华为ap3010DN-V2刷出胖AP并配置接入POE交换机实现上网

    配置FAT AP二层组网示例 组网图形 图1 配置二层网络WLAN基本业务示例组网图 组网需求 如图1所示,FAT AP通过有线方式接入Internet,通过无线方式连接终端.现某企业分支机构为了保证 ...

  9. VS code配置go语言开发环境之自定义快捷键及其对应操作

    VS code 配置 自定义快捷键 及其对应操作   由于 vs code 的官方 go 插件不支持像 goland 一样运行当前 go 文件, 只能项目 或者 package 级别地运行, 因此有必 ...

  10. Docker 国内仓库和镜像

    Docker 国内仓库和镜像 由于网络原因,我们在pull Image 的时候,从Docker Hub上下载会很慢...所以,国内的Docker爱好者们就添加了一些国内的镜像(mirror),方便大家 ...