JS中同步顯示並分割輸入的數字字串

2022-02-20 21:13:17 字數 3416 閱讀 1064

題目比較晦澀,來張圖來說明要表達的效果:

第一張圖的效果就是,使用者輸入乙個數字,上面就顯示乙個大層,然後顯示輸入的數字,並把數字用空格按照每四位分割出來。好像在建行的網上銀行上面就有這種效果。第二個圖的效果就是使用者在乙個文字框中輸入一串數字,然後再游標離開的時候,把數字按照每三位用逗號給分割開來,類似於老外的金錢輸入效果。

這種效果中,仿造的就是輸入銀行卡子類的,故只能夠輸入數字,需要禁用使用者輸入的其它字元下面是幾種實現方式。先貼上html和css**:

1

<

html

>

2<

head

>

3<

style

type

="text/css"

>

4#gaoliang

15style

>

16head

>

1718

<

body

>

19<

div

id="gaoliang"

>

div>

20 卡號:<

input

type

="text"

id="kahao"

/>

21body

>

22html

>

這個事件是在使用者按下鍵盤後觸發,也就是說,此時介面上是沒有使用者輸入的資料的,但是可以通過event事件物件來獲得使用者輸入的資料。要解決的問題就是手動的將使用者輸入的資料給拼接顯示到介面上去,還有就是要考慮到使用者選擇刪除的時候是通過退格鍵刪除還是用滑鼠選中以後刪除。js**如下:

1     document.getelementbyid('kahao').onkeydown = kahao;//

註冊事件方法23

function

kahao(evt);9//

拿到當前文字框中已經存在的值

10var value = this

.value;

11//

判斷輸入的是否是退格鍵

12if(e.keycode == 8)else

if( document.selection.createrange );

21//

如果沒有選擇長度就為0,那麼就刪除最後乙個

22if(s.length == 0);

25//

執行刪除資料

26 value = value.replace(s,'');

27 }else;33

34var line;//

用來存放正則匹配的數字字串

35var strs=;//

存放已經提前的字串

36var reg = /(\d)/g;//

正則。使用的是exec來匹配,可以使用replace更簡單,在下一種方式中使用

37while((line =reg.exec(value)));

40//

按照正則,四個數為一組進行分割,由於匹配失敗,返回乙個null,直接導致後面的join報錯,故不使用它

41//

strs = value.match(reg);

42//

在按照空格進行拼接

43 value = strs.join(' ');

44//

拿到層進行設定以及顯示

45var gao = document.getelementbyid('gaoliang');

46 gao.innerhtml = value;//

innerhtml基本上不存在瀏覽器相容性問題,故用它

47 gao.style.display = 'block';

48 };

onkeydown 方式實現

這種方式在實現上麻煩的就是在使用者刪除資料的時候,要進行判斷,而且還存在瀏覽器相容性問題。還有就是需要拼接使用者輸入的資料,但是它的同步性很好

在keyup事件中,相比就比較簡單,引用當這個事件觸發的時候,使用者輸入的值已經在介面上了,我們可以直接獲取到。而且如果使用者是刪除,也不需要關係是通過滑鼠選中刪除還是直接按退格鍵刪除,因為在刪除鍵抬起的時候,介面上的資料已經刪除了。**如下:

1     document.getelementbyid('kahao').onkeyup = kahaotwo;//

註冊事件方法23

function

kahaotwo(evt))(?=\d)/g,'$1 ')

1112

var gao = document.getelementbyid('gaoliang');

13 gao.innerhtml =value;

14 gao.style.display = 'block';

15 };

onkeyup 方式實現

這種方式的實現中,有乙個不好的就是,當使用者輸入非數字的時候,用正則去替換掉,因為輸入的字元已經在介面上了,突然沒有了,體驗下不好。

結合上面兩種方式的優點,可以再keydown下面判斷使用者的非法輸入,在keyup裡面對資料進行替換,**如下:

1     document.getelementbyid('kahao').onkeydown =kahaothreedown;

2 document.getelementbyid('kahao').onkeyup =kahaothreeup;34

function

kahaothreedown(evt);9};

1011

function

kahaothreeup())(?=\d)/g,'$1 ');

14 gao.style.display = 'block';

15 };

使用者輸入完成,就代表的是失去了焦點,可以註冊乙個onblur事件來完成。由於採用的是正則,而正則預設的是從左向右匹配(也許可以是從右向左匹配,不過我不清楚),題目的要求是從右向左分割,所有**中先對字串進行了乙個反轉處理,分割成功後在進行乙個翻轉就ok了。js中的**如下:

1     docuemnt.getelementbyid('nums').onblur =splitnum;23

function

splitnum(evt))(?=\d)/g,'$1,');

11this.value = value.split('').reverse().join('');

12 };

尋找輸入數字中的全數字

題目內容 如果乙個n位數剛好包含了1至n中所有數字各一次則稱它們是全數字 pandigital 的,例如四位數1324就是1至4全數字的。從鍵盤上輸入一組整數,輸出其中的全數字 import copy defpandigital nums a,e a.extend list nums e copy....

根據使用者輸入的數字,顯示對應星期

根據使用者輸入的數字,顯示對應星期.思路 1.本體符合查表的思想,可以設定乙個方法,讓使用者傳入乙個整型數值,然後在表中查對應的星期幾就可以了.public class whatday else 使用者輸入數值,電腦返回星期幾的漢子提示 param userscan 使用者輸入的字串 public ...

尋找輸入數字中的全數字(pandigital)

題目內容 如果乙個n位數剛好包含了1至n中所有數字各一次則稱它們是全數字 pandigital 的,例如四位數1324就是1至4全數字的。從鍵盤上輸入一組整數,輸出其中的全數字,若找不到則輸出 not found 形如 def pandigital nums return lst if name m...