『壹』 js支付寶的支付金額輸入框怎麼做的
那麼今天我就用JavaScript代碼來實現這個效果吧,那麼首先介紹一下整個的思路,首先我們先將確定輸入密碼的位數,我的需求是5位,那麼就用一個div標簽包住5個input標簽
現在很多時候大家付款的場景都是在手機上面,而隨著H5頁面的開發變得越來越方便,很多場景也從客戶端搬到了瀏覽器中,其中支付這個場景就很自然的被放在了瀏覽器中。那麼這樣的輸入框大家一定不會陌生吧:
那麼今天我就用JavaScript代碼來實現這個效果吧,那麼首先介紹一下整個的思路,首先我們先將確定輸入密碼的位數,我的需求是5位,那麼就用一個div標簽包住5個input標簽。
並且給這個5個input設置display: inline-block 屬性,同時用<!- ->來消除元素直接的margin值,那麼HTML就是如下的樣子:
<div class="input"><input type="tel" placeholder="隨" maxlength=""><!--><input type="tel" placeholder="機" maxlength=""><!--><input type="tel" placeholder="" maxlength=""><!--><input type="tel" placeholder="位" maxlength=""><!--><input type="tel" placeholder="數" maxlength=""></div>在代碼中我們需要設置最多輸入的位數,不然就不像了嘛~當然為了在移動端輸入的時候能喚起數字鍵盤來,我們也需要設置type="tel"。那麼接下來就是CSS樣式的代碼了,這里我就簡單的貼出一些代碼,具體高仿的像不像其實就是這里了~
input {display: inline-block;&:last-child {border-right: px solid #;}input {border-top: px solid #;border-bottom: px solid #;border-left: px solid #;width: px;height: px;outline:none;font-family: inherit;font-size: px;font-weight: inherit;text-align: center;line-height: px;color: #ccc;background: rgba(,,,);}}那麼接下來就是最關鍵的JavaScript部分了,
/*** 模擬支付寶的密碼輸入形式*/(function (window, document) {var active = ,inputBtn = document.querySelectorAll('input');for (var i = ; i < inputBtn.length; i++) {inputBtn[i].addEventListener('click', function () {inputBtn[active].focus();}, false);inputBtn[i].addEventListener('focus', function () {this.addEventListener('keyup', listenKeyUp, false);}, false);inputBtn[i].addEventListener('blur', function () {this.removeEventListener('keyup', listenKeyUp, false);}, false);}/*** 監聽鍵盤的敲擊事件*/function listenKeyUp() {var beginBtn = document.querySelector('#beginBtn');if (!isNaN(this.value) && this.value.length != ) {if (active < ) {active += ;}inputBtn[active].focus();} else if (this.value.length == ) {if (active > ) {active -= ;}inputBtn[active].focus();}if (active >= ) {var _value = inputBtn[active].value;if (beginBtn.className == 'begin-no' && !isNaN(_value) && _value.length != ) {beginBtn.className = 'begin';beginBtn.addEventListener('click', function () {calculate.begin();}, false);}} else {if (beginBtn.className == 'begin') {beginBtn.className = 'begin-no';}}}})(window, document);首先我們對最外層的div進行監聽,當發現用戶選擇div的時候就將input的焦點設置到active上面去,而這個active則是一個計數器,默認的時候是第一位的,也就是0,而當我們輸入了正確的數字後將會增加一個active,這樣input的焦點就會向後移動了,這樣就完成了輸入一個向後移動一位的功能了,而同時我們監聽鍵盤上的退格鍵,當用戶點擊了退格鍵之後就對active減一,這樣輸入框的焦點也就向前移動了,當然,當input失去焦點的時候我們也同時移除綁定在上面的監聽事件,這樣就不會造成多次觸發的問題了。
『貳』 前端input框中怎麼用正則表達式限制只能輸入小數點前最多7位,小數點後兩位小數的數字
小數點前面可以不寫任何數字,小數點前後均無數字則不匹配
『叄』 前端jquery怎麼限制文本框輸入數字的大小
監聽文本框的onchange事件,來用JS判斷當前數字的大小。
從而限制輸入數字的大小
望採納
『肆』 JS如何限制文本框只能輸入小寫的金額,且首位不能輸0,小數點後只能輸入2位
需要准備的材料分別是:電腦、html編輯器、瀏覽器。
1、首先,打開html編輯器,新建帶輸入框的html文件,例如:index.html。
『伍』 大寫金額書寫規范
漢字大寫數字金額如零、壹、貳、叄、肆、伍、陸、柒、捌、玖、拾、佰、仟、萬、億等,一律用正楷或者行書體書寫,不得用0、一、二、三、四、五、六、七、八、九、十等簡化字代替。
中文大寫金額數字前應標明「人民幣」字樣,大寫金額數字應緊接「人民幣」字樣填寫,不得留有空白。大寫金額數字前未印「人民幣」字樣的,應加填「人民幣」三字。
(5)前端金額數字輸入框規范擴展閱讀:
在票據和結算憑證大寫金額欄內不得預印固定的「仟、佰、拾、萬、仟、佰、拾、元、角、分」字樣;阿拉伯數字小寫金額數字中有「0」時,中文大寫應按照漢語語言規律、金額數字構成和防止塗改的要求進行書寫。
阿拉伯數字中間連續有幾個「0」時、中文大寫金額中間可以只寫一個「零」字,如¥6007.14應寫成人民幣陸仟零柒元壹角肆分。
『陸』 HTML的金額輸入框,三位一逗號的格式
邊輸入數字,邊顯示三位一逗號格式是因為調用的文本框的keyup事件,而你想要在全部輸入完滑鼠點擊其他處才調用這種格式的話,可以改為失去焦點時調用,即可以將keyup事件換成blur事件,即失去焦點時事件;這樣就可以實現你說的那種效果了。
『柒』 js控制輸入框只能輸入數字金額,可以為負,否則自動截取掉
/*
匹配帶正負號、小數點的數字
*/
functionisNumber(num){
if(num){
return/^-?d+.?d+$/.test(num);
}
returnfalse;
}
functionvalidElem(id){
if(id){
varelem=document.getElementById(id);
if(elem&&!isNumber(elem.value)){
//非數字
elem.value='';
returnfalse;
}
}
}