js jq 手机号实现(344) 附带删除功能 jq 实现银行卡没四个数加一个空格 附带删除功能
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 实现银行卡没四个数加一个空格 附带删除功能的更多相关文章
- JS实现input中输入数字,控制每四位加一个空格(银行卡号格式)
前言 今天来讲讲js中实现input中输入数字,控制每四位加一个空格的方法!这个主要是应用于我们在填写表单的时候,填写银行卡信息,要求我们输入的数字是四位一个空格!今天主要介绍两种方式来实现这个方法! ...
- js填写银行卡号,每隔4位数字加一个空格
1.原生js写法 !function () { document.getElementById('bankCard').onkeyup = function (event) { var v = thi ...
- JS文本框每隔4个数字加一个空格,银行卡号文本框
<input type="text" onkeypress="return (function(key,that){return (key>47&&a ...
- js 每隔四位加一个空格
var str = '2016060520103600466'; var str=str.replace(/\s/g,'').replace(/(.{4})/g,"$1 "); a ...
- js银行卡四个数字一个空格
!function () { document.getElementById('bankCard').onkeyup = function (event) { var v = this.value; ...
- jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- php相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子
相册功能实现(包含php图片上传,后台管理,浏览和删除)教程例子包括五个部分: 一.相册首页 <html> <head> <meta charset="utf- ...
- 原生js实现一个简单的倒计时功能
大家好,我是云中君!欢迎大家来观看我的博客 之前那,在群里看到很多人问,关于电商网站中的倒计时功能怎么实现,很多人说在网上找了很多插件,但是不是很会用,所以今天就在这里分享一下我封装的一个小的倒计时功 ...
随机推荐
- 系统架构-设计模式(适配器、观察者、代理、抽象工厂等)及架构模式(C/S、B/S、分布式、SOA、SaaS)(干货)
博客园首页是需要分享干货的地方,今天早上写的<HRMS(人力资源管理系统)-从单机应用到SaaS应用-系统介绍>内容下架了,所以我就按照相关规定,只分享干货,我把之前写完的内容整理发布上来 ...
- srs2.0安装问题
原文: https://blog.csdn.net/ddr77/article/details/52511340 编译配置如下 ./configure --disable-all --with-ssl ...
- Micro开发文档
secret = md5 ({app_id,timestamp}) access_toKen = md5 ({app_id,app_srect,timestamp}) sign = sha2(para ...
- ionic android升级检查
https://www.cnblogs.com/zxj159/p/4421578.html 坑: 放到cordova.file.DataDirectory下载异常? 只好cordova.file.ex ...
- 在windows命令行批量ping局域网内IP
参考了博客园Alfred Zhao的文章<Windows平台ping测试局域网所有在用IP> 在cmd命令行运行如下命令即可: ,,) -w .%i | find "回复&quo ...
- OpenCV 对矩阵进行掩码操作
Mask operations on matrices https://docs.opencv.org/master/d7/d37/tutorial_mat_mask_operations.html ...
- Effective Java 第三版——64. 通过对象的接口引用对象
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- Google protobuf解析消息逻辑的版本问题
在分析caffe2源码的过程中,由于caffe2使用protobuf作为网络结构和网络参数序列化和反序列化的机制,想在反序列化之前进行加解密处理,这是反向protouf其实有两个版本的实现来进行消息的 ...
- Mybatis(五) 延迟加载和缓存机制(一级二级缓存)
踏踏实实踏踏实实,开开心心,开心是一天不开心也是一天,路漫漫其修远兮. --WH 一.延迟加载 延迟加载就是懒加载,先去查询主表信息,如果用到从表的数据的话,再去查询从表的信息,也就是如果没用到从表的 ...
- Gitee vs插件(Gitee Extension for Visual Studio)
Gitee 码云(gitee.com)是开源中国推出的代码托管平台,支持 Git 和 SVN,提供免费的私有仓库托管. https://gitee.com/GitGroup/Gitee.VisualS ...