JS中同步显示并分割输入的数字字符串 - 编程大巴 - 次元立方网 - 电脑知识与技术互动交流平台
JS中同步显示并分割输入的数字字符串
题目比较晦涩，来张图来说明要表达的效果：
&&& 第一张图的效果就是，用户输入一个数字，上面就显示一个大层，然后显示输入的数字，并把数字用空格按照每四位分割出来。好像在建行的网上银行上面就有这种效果。第二个图的效果就是用户在一个文本框中输入一串数字，然后再光标离开的时候，把数字按照每三位用逗号给分割开来，类似于老外的金钱输入效果。
效果一 同步显示分割分割输入
这种效果中，仿造的就是输入银行卡子类的，故只能够输入数字，需要禁用用户输入的其它字符下面是几种实现方式。先贴上HTML和CSS代码：
&style type="text/css"&
#gaoLiang{
font-family:C
font-size:20
text-align:
line-height:50
display:/*这个层模式是隐藏的*/
&div id="gaoLiang"&&/div&
卡号：&input type="text" id="kaHao" /&
实现方式一：只是利用键盘的 onkeydown 事件
&&&&这个事件是在用户按下键盘后触发，也就是说，此时界面上是没有用户输入的数据的，但是可以通过event事件对象来获得用户输入的数据。要解决的问题就是手动的将用户输入的数据给拼接显示到界面上去，还有就是要考虑到用户选择删除的时候是通过退格键删除还是用鼠标选中以后删除。JS代码如下：
document.getElementById('kaHao').onkeydown = kaH//注册事件方法
function kaHao(evt){
var e = evt || window.
//如果用户输入的非数字或者退格键就阻止输入
if((e.keyCode & 48 || e.keyCode&57) && e.keyCode != 8){
//拿到当前文本框中已经存在的值
var value = this.
//判断输入的是否是退格键
if(e.keyCode == 8){
//如果是退格键就删除选中的文本或者最后一个。因为在Keydown事件中，是先执行代码后改变界面的值
//拿到用户选择的要删除的文本
if(typeof this.selectionStart == 'number'){
s = this.value.substring(this.selectionStart,this.selectionEnd);
}else if( document.selection.createRange ){//IE8 及以下
s = document.selection.createRange().
//如果没有选择长度就为0，那么就删除最后一个
if(s.length == 0){
s = value.charAt(value.length-1)
//执行删除数据
value = value.replace(s,'');
//如果不是删除键就把当前的字符个拼接上去，由于JS中加号运算优先考虑数字，所有toString()
//IE6~8不支持e.key的写法
//value = this.value.toString() + e.
value = this.value.toString() + String.fromCharCode(e.keyCode);
34//用来存放正则匹配的数字字符串
var strs=[];//存放已经提前的字符串
var reg = /(\d{1,4})/g;//正则。使用的是exec来匹配，可以使用replace更简单，在下一种方式中使用
while((line = reg.exec(value))){
strs.push(line[0]);
//按照正则，四个数为一组进行分割,由于匹配失败，返回一个null，直接导致后面的join报错，故不使用它
//strs = value.match(reg);
//在按照空格进行拼接
value = strs.join(' ');
//拿到层进行设置以及显示
var gao = document.getElementById('gaoLiang');
gao.innerHTML =//innerHTML基本上不存在兼容性问题，故用它
gao.style.display = 'block';
onkeydown 方式实现
&&&这种方式在实现上麻烦的就是在用户删除数据的时候，要进行判断，而且还存在兼容性问题。还有就是需要拼接用户输入的数据，但是它的同步性很好
实现方式二：只是利用键盘的 onkeyup 事件
&&&&在keyup事件中，相比就比较简单，引用当这个事件触发的时候，用户输入的值已经在界面上了，我们可以直接获取到。而且如果用户是删除，也不需要关系是通过鼠标选中删除还是直接按退格键删除，因为在删除键抬起的时候，界面上的数据已经删除了。代码如下：
document.getElementById('kaHao').onkeyup = kaHaoT//注册事件方法
function kaHaoTwo(evt){
var e = evt || window.
//用正则去替换掉用户输入的非数字字符
this.value = this.value.replace(/[^\d]*/g,'');
//用正则去替换，(?=\d) 就是要求，如果要匹配成功，那么前面匹配的四位数字后面还必须再有以为数字。可以将后面替换的空格换成逗号或者其它字符就能够看出正则中有和没有这个匹配要求的区别
value = this.value.replace(/(\d{4})(?=\d)/g,'$1 ')
var gao = document.getElementById('gaoLiang');
gao.innerHTML =
gao.style.display = 'block';
onkeyup 方式实现
&&&&这种方式的实现中，有一个不好的就是，当用户输入非数字的时候，用正则去替换掉，因为输入的字符已经在界面上了，突然没有了，体验下不好。
实习方式三：综合上面两种方式
&&&&结合上面两种方式的优点，可以再keydown下面判断用户的非法输入，在keyup里面对数据进行替换，代码如下：
document.getElementById('kaHao').onkeydown = kaHaoThreeD
document.getElementById('kaHao').onkeyup = kaHaoThreeUp;
function kaHaoThreeDown(evt){
var e= evt || window.
if((e.keyCode & 57 || e.keyCode&48) && e.keyCode!=8){
function kaHaoThreeUp(){
var gao = document.getElementById('gaoLiang');
gao.innerHTML =
this.value.replace(/(\d{4})(?=\d)/g,'$1 ');
gao.style.display = 'block';
效果二 在用户输入完成后将数字按照从右到左分割
&&&&用户输入完成，就代表的是失去了焦点，可以注册一个onblur事件来完成。由于采用的是正则，而正则默认的是从左向右匹配(也许可以是从右向左匹配，不过我不清楚)，题目的要求是从右向左分割，所有代码中先对字符串进行了一个反转处理，分割成功后在进行一个翻转就OK了。JS中的代码如下：
docuemnt.getElementById('nums').onblur = splitN
function splitNum(evt){
var value = this.
//先替换到所有的除了小数点以外的非数值数值
value = value.replace(/[^(\d.)]*/g,'');
//字符串没有反转方法，故需要先转成数组
value = value.split('').reverse().join('');
//可以尝试不加正则后面的(?=\d),在输入的数字刚好是3的整数倍时就会出现问题
value = value.replace(/(\d{3})(?=\d)/g,'$1,');
this.value = value.split('').reverse().join('');
延伸阅读：
前言　　在项目的进行中有时会碰到需要去了解由第三方...
本教程为 李华明 编著的iOS-Cocos2d游戏开发系列教程：教程涵盖关于i......
专题主要学习DirectX的初级编程入门学习，对Directx11的入门及初学者有......
&面向对象的JavaScript&这一说法多少有些冗余，因为JavaScript 语言本......
北京时间4月12日凌晨消息，市场研究公司comScore周......　　　　　　　　　
您现在的位置：&&>&&>&&>&&>&&>&正文
计算机二级VB控件:VB文本框的常用属性
来源：（）　　【】　
　　文本框是一个文本编辑区。可以在设计阶段或运行期间在这个区域中输入、编辑、修改和显示文本，类似于一个简单的文本编辑器。　　常用属性　　文本框基本属性：　　Name、text、：Height、Width、Top、Left、Enabled、Visible、FontName、FontSize、FontBold、FontItalic、FontUnderline、A lignment、BorderStyle等。　　文本框特有属性：　　(1)Text文本属性　　在文本框中显示正文的内容存放在Text属性中。　　(2)．MaxI~ength属性　　设置文本框中能够输入的正文内容的最大长度。0：缺省值，为系统允许的最长度；非零值：文本框中的字符数的最大值，一个英文字符与一个汉字都为1，中国自学编程网整理发布。　　(3)MultiI,ine属性　　True：则可使用多行文本，即在文本框中输入或显示文本时可换行。按crtl+Enter键可以插入一个空行；False：则在文本框中只能输入单行文本。　　(4)PasswordChar属性　　该属性可用于口令输入。在默认状态下，该属性被设置为空字符串(不是空格)，当用户从键盘上输入时，每个字符都可以在文本框中显示出来。如果把PasswordChar属性设置为一个字符，例如星号(★)，则在文本框中输入字符时，显示的不是输入的字符，而是被设置的字符(如星号)。不过文本框中的实际内容仍是输入的文本，只是显示结果改变了。利用这一特性，可以用作设置口令的输入，中国自学编程网， 。　　(5)ScrollBars属性　　该属性用来确定文本框中是否有滚动条。O―None：无滚动条；1一Hotizontal：加水平滚动条；2一Vertical：加垂直滚动条；3一Both：同时加水平和垂直滚动条。　　说明：　　当MuhiI,ine多行属性为True时，ScrollBars属性才有效。当文本框具有水平或垂直滚动条后，文本框中文本的自动换行功能不起作用，只能通过回车键换行。　　(6)I,ocked属性　　False：表示可以编辑，默认值为False；Tme：文本控件相当于标签的作用，不能被编辑。　　(7)SelStart、SelLength、SelText属性　　在程序中，对文本内容进行选择时，这3个属性用来标识用户选中的正文。　　SelStart：选定正文的开始位置，第一个字符的位置是0。　　Selcength：选定正文长度。　　SelText：选定正文内容。　　设置了SelStarl和SelI~ength属性后，VB会自动将设定的正文送入SelText属性存放。这些属性一般用于在文本编辑中设置插入点及范围，选择字符串，清除文本等，并且经常与剪贴板一起使用，完成文本信息的剪切、拷贝、粘贴等功能。1&&&
文章责编：gaoxiaoliang&　看了本文的网友还看了
?&&( 15:51:47)?&&( 14:16:20)?&&( 14:14:40)?&&( 14:13:00)?&&( 14:10:55)?&&( 14:02:35)
? ? 　 ? ? 　 ? ? 　 ? ? 　 ? ?
? ? 　 ? ? 　 ?
? 　 ? ? 　　 ? ? 　 ? ? 　 ? ? 　 ? ?
? ? 　 ? ?
实用工具 |
| 大全 | 大全
　　　　 |
版权声明：如果网所转载内容不慎侵犯了您的权益，请与我们联系，我们将会及时处理。如转载本内容，请注明出处。
Copyright & 2004-
　网　All Rights Reserved　
中国科学院研究生院权威支持(北京)　电 话：010-　传 真：010-您还未登陆，请登录后操作！
，统计从文本框输入的字符串中的字母、数字、空格和其他字符的个数，由不同的文本框显示个数，设计界面且实现功能。
Einstein兄的程序存在如下问题:
+,-,*,\,回车,换行符,删除符等大量字符均无法识别,您可自行在您的程序中输入如上字符,以验证小的所说.
另对您的程序不做任何评价.
正如Einstein兄所说,应该自己先试着做一下，碰到具体的问题再提出来，更有利于进步。
以下为小的修改之程式,能够完整识别出任意字符,当中统计字符个数请当当姐姐自行完成,这样才有利于您的进步(这个程序正是小的开学时所写的程式,是入门级的)
'在窗体中添加一个Text1
'执行结果会在立即窗口中显示,代码已经为最优化
Private Sub Text1_Change()
Dim strText As String
nlen = Len(Text1)
For i = 1 To nlen
strText = Mid(Text1, i, 1)
If Asc(strText) &= 97 And Asc(strText) &= 122 Or _
Asc(strText) &= 65 And Asc(strText) &= 90 _
'对输入的大小写英文字母进行判断
Einstein兄的程序存在如下问题:
+,-,*,\,回车,换行符,删除符等大量字符均无法识别,您可自行在您的程序中输入如上字符,以验证小的所说.
另对您的程序不做任何评价.
正如Einstein兄所说,应该自己先试着做一下，碰到具体的问题再提出来，更有利于进步。
以下为小的修改之程式,能够完整识别出任意字符,当中统计字符个数请当当姐姐自行完成,这样才有利于您的进步(这个程序正是小的开学时所写的程式,是入门级的)
'在窗体中添加一个Text1
'执行结果会在立即窗口中显示,代码已经为最优化
Private Sub Text1_Change()
Dim strText As String
nlen = Len(Text1)
For i = 1 To nlen
strText = Mid(Text1, i, 1)
If Asc(strText) &= 97 And Asc(strText) &= 122 Or _
Asc(strText) &= 65 And Asc(strText) &= 90 _
'对输入的大小写英文字母进行判断
Debug.Print " the type is letter"
ElseIf Asc(strText) &= 48 And Asc(strText) &= 57 Then
'对输入的数字进行判断
Debug.Print " the type is fig "
'对输入的其他字符进行判断
Debug.Print " the type is character "
以上程式我只是修正Einstein兄的BUG以及对大量无用复杂代码进行优化.
并不能解决问题,剩下的程式还得当当姐姐自行完成.这样有利于您的提高.
若您实在想不出解决问题的办法,我的符件里是完整的程式源代码.请您经过考虑以后再打开.
= 97 And Asc(strText) = 65 And Asc(strText) = 48 And Asc(strText)
您的举报已经提交成功，我们将尽快处理，谢谢！
大家还关注posts - 169,&
comments - 16,&
trackbacks - 0
阅读(...) 评论()