`

JQ 每4位数字出现一次空格

 
阅读更多
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<script src="jquery-1.10.1.min.js" ></script>
</head>
<body>
<input type="text" id="alterNumber" style="width: 300px;"/>
<script>
$(function() {
	//难点不是插入空格,而是修正光标的位置,这个只支持IE9+
	//可用于银行卡号
	$('#alterNumber').on('keyup', function(e) {
		//只对输入数字时进行处理
		if((e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105 )){
			//获取当前光标的位置
			var caret = this.selectionStart;
			//获取当前的value
			var value = this.value;
			//从左边沿到坐标之间的空格数
			var sp =  (value.slice(0, caret).match(/\s/g) || []).length;
			//去掉所有空格
			var nospace = value.replace(/\s/g, '');
			//重新插入空格
			var curVal = this.value = nospace.replace(/(\d{4})/g, "$1 ").trim();
			//从左边沿到原坐标之间的空格数
			var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length;
			//修正光标位置
			this.selectionEnd = this.selectionStart = caret + curSp - sp;
		}
	})
})
</script>	
</body>
</html>

 

效果图:

 

参考来源:http://www.cnblogs.com/rubylouvre/p/6087353.html

 

 

 

 

 

 

 

 

  • 大小: 25.5 KB
分享到:
评论

相关推荐

    JQ不断增加滚动的数字

    设置合适的间隔时间,如每100毫秒执行一次,以实现连续滚动的效果。 6. **事件监听**:如果需要,还可以添加事件监听器,以便在特定事件触发时开始或停止滚动效果,例如页面加载或用户交互。 7. **代码优化**:...

    jq实现led数字效果.zip

    "jq实现led数字效果"是指利用jQuery库来创建一种LED数字显示的效果,通常用于呈现日期或时间,使得网页的界面更具有科技感和动态感。 jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、...

    每三秒滚一次代码JQ

    标题中的“每三秒滚一次代码JQ”指的是使用JavaScript的jQuery库实现代码滚动效果,每隔三秒自动滚动代码展示。这种效果常用于代码演示或教程中,以便用户可以逐行查看代码,而无需手动滚动。 jQuery是一个轻量级、...

    jq22数字滚动.zip

    "jq22数字滚动.zip"提供的是一款基于jQuery技术的数字滚动插件,名为jQueryRunNum。这个插件允许开发者轻松地在网页上实现动态的数字递增或递减效果,提升用户界面的动态感和吸引力。 【jQuery基础】 jQuery是一个...

    jQuery空格键开始随机图片抽奖代码

    6. **防止多次触发**:为了防止用户连续按下空格键导致抽奖多次执行,可以添加一个开关变量。在用户按下空格键后,设置该开关为true,抽奖结束后再将其重置为false: ```javascript var isDrawing = false; $...

    jquery数字软键盘(无英文字母)

    本文将深入探讨jQuery数字软键盘这一主题,它是一个专为输入纯数字设计的虚拟键盘,不包含英文字母。 jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画制作等多个方面的工作。对于数字软键盘...

    jq6500语音芯片

    jq6500语音芯片是一款广泛应用在电子设备中的声音处理组件,主要负责音频数据的存储、解码和播放。这款芯片以其高效的性能、广泛的兼容性和易于编程的特点,在单片机控制的系统中得到了广泛的应用。 首先,我们来看...

    每循环5条添加一个样式(JQ前端技术分享)

    本篇将详细讲解如何使用JavaScript(JS)和jQuery(JQ)实现“每循环5条数据后添加一个样式”的功能。 首先,我们需要了解JavaScript的基本语法和jQuery库的使用。JavaScript是一种广泛用于网页和应用的脚本语言,...

    数字滚动--基于jq编写的数字滚动效果

    【数字滚动--基于jq编写的数字滚动效果】 在网页设计中,数字滚动效果是一种常见的动态展示数据的方式,常用于统计、计数或者实时更新的数据展示。这种效果可以使页面更具动态感,吸引用户的注意力,增强用户体验。...

    基于jquery实现的银行卡号每隔4位自动插入空格的实现代码

    难点不是插入空格,而是修正光标的位置,这个只支持IE9+、chrome浏览器 注意:这个使用了jquery框架 核心代码 $(function() { $('#kahao').on('keyup', function(e) { //只对输入数字时进行处理 if((e.which &gt;=...

    jq安装包rpm.rar

    `jq`是一款强大的命令行JSON处理器,用于在命令行界面中查看、操作和转换JSON数据。这个`jq安装包rpm.rar`是一个包含了`jq`工具的RPM(Red Hat Package Manager)格式的压缩包,主要面向使用Linux发行版如CentOS、...

    数字键盘(纯js/jq两版)

    例如,使用`$('element').on('click', function() {...})`可以一次性为所有数字键添加点击事件,而不需要为每个按钮单独编写代码。 数字键盘的样式也是其设计的重要组成部分。简洁的样式可以提高用户体验,使用户...

    js jq输入姓名转成拼音姓大写 带空格

    "js jq输入姓名转成拼音姓大写 带空格"这个标题所涉及的知识点,主要是如何利用JavaScript(js)和jQuery(jq)库来实现中文姓名到拼音的转换,并且在转换过程中,确保姓氏首字母大写,同时保留姓名间的空格。...

    使用HTML和jQuery实现6位密码输入和数字键盘绘制

    使用HTML和jQuery实现6位密码。使用H5结合JQuery,模仿支付宝和微信支付的六位密码输入,重新绘制定义数字键盘,在规定的数字键盘中的数字进行点击,将密码填进六格的输入框,一个简单的小demo,适合新手学习交流

    JQ8900语音模块资料包

    89C52是经典的8位单片机,同样可以与JQ8900进行通信。"7-语音模块_8051系列例程"可能包含针对89C52的程序示例,开发者可以参考此文件实现模块的控制功能。 3. **Arduino平台集成** Arduino是一种开源电子原型平台...

    STM32示例程序 -JQ8400.zip

    JQ8400语音模块是一个集成的音频处理解决方案,它包含了一个16位的微控制器(MCU)和一个专用于音频解码的数字信号处理器(ADSP)。这样的组合使得模块能够高效地进行硬解码,从而确保了音频播放的稳定性和高质量。...

    jq 双日历插件

    jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件...

    JQ+CSS超酷时间翻板代码

    例如,设置一个每秒执行一次的定时器,根据新旧时间的差异计算需要翻转的数字,然后应用相应的动画。 为了使翻板时钟更具个性化,源代码通常会包含注释,指示哪些部分可以修改以改变样式或功能。你可以调整CSS的...

Global site tag (gtag.js) - Google Analytics