求输入框JS：输入16位卡号，输完4位自动加上空格

bennman 2010-11-12 02:27:37

效果类似 支付宝的这个 “信用卡号”输入框：（输入的时候就自动加空格 不是输完了才加）
https://ccrprod.alipay.com/ccr/billEnteringNoLogin.htm
他这个也有点小BUG！
我写的BUG更多！ O(∩_∩)O~ 谢了！
...全文
703 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
bennman 2010-11-12
  • 打赏
  • 举报
 回复
OK 结贴！谢谢所有人！
5楼的够用了

另发个刚抠的建设银行用的 和5楼效果一样


var str=(this.value).replace(/[^\d]/g, "");

		var maxlen = 16;

		if (str.length < maxlen) {

			maxlen = str.length;

		}

		var temp = "";

		for (var i = 0; i < maxlen; i++) {

			temp = temp + str.substring(i, i + 1);

			if (i != 0 && (i + 1) % 4 == 0 ) {

				temp = temp + " ";

			}

		}

		this.value=temp;


正则这样比较好：replace(/[^\d]/g, "") 让用户不能输入 数字以外的字符
Mr-Jee 2010-11-12
  • 打赏
  • 举报
 回复
你找寻下控制光标位置的方法~~这个只能满足你在前面补数字而不会影响格式化
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



	<title>test</title>

	<script type="text/javascript">

		window.onload = function() {

			document.getElementById("test").onkeyup = function() {

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

			};

		};

	</script>

</head>

<body>

	<input type="text" id="test" />

</body>

</html>
bennman 2010-11-12
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 kongxh1218 的回复:]

引用 5 楼 kongxh1218 的回复:

HTML code

<script type="text/javascript">
function test(obj)
{
var value = obj.value;
value = value.replace(/\s*/g, "");
var result = [];
for(var i = 0; i ……

将on……
[/Quote]

差不多就这样了 但如8楼所说 回到前面输入只能输入一位数 光标就跑到后面了
dalmeeme 2010-11-12
  • 打赏
  • 举报
 回复
没有考虑字符的类型，楼主自己改下。
dalmeeme 2010-11-12
  • 打赏
  • 举报
 回复
以上经过测试可以的
dalmeeme 2010-11-12
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<script>

function a(Xtext)

{

    var str=Xtext.value;

    if(str.length<20)

    {

        if(str.length==4||str.length==9||str.length==14)

            Xtext.value=Xtext.value+" ";

    }

    else

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

}

</script>

</head>

<body>

<input type="text" id="text1" onkeyup="a(this)"/>

</body>

</html>
Mr-Jee 2010-11-12
  • 打赏
  • 举报
 回复
如果说你还要在前面输入还要保证这个+空格没问题，就带来了另外一个问题。那就是光标会跑后面去
kongxh1218 2010-11-12
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 kongxh1218 的回复:]

HTML code

<script type="text/javascript">
function test(obj)
{
var value = obj.value;
value = value.replace(/\s*/g, "");
var result = [];
for(var i = 0; i ……
[/Quote]
将onkeydonw改为onkeyup
bennman 2010-11-12
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 kaoh1631 的回复:]

HTML code

<script language="javascript">
<!--
var _length=0;
function test(){
var _o=document.getElementById("t");
_length++;
if(_length==4){
_o.value+=' ';
_length=0;
}
}
//-->
</s……
[/Quote]

从左到右按顺序 输入可以，但如果我输入到一半 再回到加几个数字就不行，谢了！
kongxh1218 2010-11-12
  • 打赏
  • 举报
 回复 


  <script type="text/javascript">

    function test(obj)

	{

		var value = obj.value;

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

		var result = [];

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

		{

			if (i % 4 == 0 && i != 0)

			{

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

			}

			else

			{

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

			}

		}

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

	}

  </script>

<input type="text" id="tt" onkeydown="test(this)" onblur="test(this)">
Mr-Jee 2010-11-12
  • 打赏
  • 举报
 回复
这个有问题 试试这个

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



	<title>test</title>

	<script type="text/javascript">

		window.onload = function() {

			document.getElementById("test").onkeyup = function() {

				this.value = this.value.replace(/(\d{4})(?=\d)/g,"$1 ");

			};

		};

	</script>

</head>

<body>

	<input type="text" id="test" />

</body>

</html>
Mr-Jee 2010-11-12
  • 打赏
  • 举报
 回复 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



	<title>test</title>

	<script type="text/javascript">

		window.onload = function() {

			document.getElementById("test").onkeyup = function() {

				this.value = this.value.replace(/(\d{4})(?:\d)/g,"$1 ");

			};

		};

	</script>

</head>

<body>

	<input type="text" id="test" />

</body>

</html>
Thinking_In_IT 2010-11-12
  • 打赏
  • 举报
 回复 


<script language="javascript">

<!--

var _length=0;

function test(){

  var _o=document.getElementById("t");

  _length++;

  if(_length==4){

	_o.value+=' ';

	_length=0;

  }

}

//-->

</script>

<input type="text" style="width:200px;height:25px;" onkeyup="test()" name="t" id="t" />
zoujp_xyz 2010-11-12
  • 打赏
  • 举报
 回复
用keyup事件追加一个空格
js银行卡号格式输入框特效代码
js银行卡号格式输入框是一款js银行卡号格式输入框input添加删除空格代码。
JS控制文本框：输入银行卡号，4位自动加上空格分隔
head>          title>testtitle>       script type="text/javascript">           window.onload =function() {               document.getElementById("test").onkeyup =function() {                   t
HTML必知必会精讲
本课程《HTML必知必会精讲》详细讲述了HTML必备知识点，内容包括：HTML概述、HTML规范、HTML思想、HBuilder工具的介绍和使用、常见标签（字体font标签、加粗b标签、下划线u标签、删除线s标签、字体倾斜i标签、上标sup标签和下标sub标签、注释标签、标题h1标签、水平线hr标签、特殊字符、列表标签）、图片img标签、HTML中的路径问题讨论（绝对路径和相对路径）、pre标签和p标签、超链接a标签、表格table标签、表单form标签（文本输入框text，密码输入框password，单选输入框radio，复选输入框checkbox，文本域textarea，文件上传项file，提交按钮submit，恢复按钮reset，普通按钮button，下拉输入框select，隐藏项hidden）、div和span标签、元标签meta、base标签、link标签、页面框架标签frameset。课程特色：所有内容均详细演示使用步骤和细节，全程手写代码，零基础都可轻松掌握！
（vue项目）实现输入银行卡号每隔四位自动补一个空格，且再次修改输入光标不会错位
（vue项目）实现输入银行卡号每隔四位自动补一个空格，且再次修改输入光标不会错位 直接看效果： 对于输入框输入银行卡号每个4位自动增加一个空格，看了很多小伙伴写的都存在各种各样的小问题，最明显的就是光标错位（输入完成后，再回去修改中间的，光标自动跑到最后面）。后面决定手撸一个。代码如下： html: <input v-model="testData" @input="formatCardNumber" ref="cardInput" /> js: data() { return {
JS 银行卡格式输入框
最近工作涉及到这样一个问题，客户需要在一个输入框中输入他的银行卡号，我们知道，银行卡号的位数非常长，如果不加以区分的全部显示在用户面前，用户的体验度肯定不高，所以诸如支付宝之类的软件在用户需要输入银行卡号时都添加了一定的格式，就是在用户输入卡号时，以4个数字为一组的形式显示给用户，譬如           6214 1234 5678 1234           那么今天就在这里大致描
JavaScript

87,916

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章