js 金額文字框實現代碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

案例1：斷行符號實現Tab跳轉。
響應文字框的onKeyDown事件，window.event.keyCode獲得使用者點擊的keyCode。
（*）keyCode和ASCII不是完全一致，主鍵盤的1和小鍵盤的1的ASCII一樣，但是keyCode不一樣。斷行符號的keyCode為 13，Tab的keyCode為9。
<body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9;}">
只有少數的鍵才能被替換，大部分是不行的，有許可權問題。
鍵盤碼與ASCII碼不一樣。
keyCode
8：退格鍵
46：delete
37-40：方向鍵
48-57：小鍵盤區的數字
96-105：主鍵盤區的數字
110、190：小鍵盤區和主鍵盤區的小數點
189、109：小鍵盤區和主鍵盤區的負號
13：斷行符號
9： Tab 就是那個把焦點移到下一個文字框的東東。
案例2：金額文字框
財務相關係統中涉及到金額的文字框有如下要求：
進入金額文本文字框不使用中文IME
不能輸入非數字
焦點在文字框中時文字框靠左對齊；焦點離開文字框時文字框靠右對齊，顯示千分位
禁用IME：style=“ime-mode:disabled” //相容FF、IE,不相容Chrome
禁止鍵入非法值，只有這些才能被鍵入(k == 9) || (k == 13) || (k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 && k<=57)||(k>=96 && k<=105)||(k>=37 && k<=40)。 onkeydown="return numonKeyDown()" 不要寫成onkeydown="numonKeyDown()" 區分事件響應函數和事件響應函數調用的函數。
禁止粘貼(偉大的 Tester)，<input onpaste=“return false;” ，太暴力，應該只是禁止粘貼非法值。在onpaste中通過clipboardData.getData(‘Text')取到粘貼板中的值，然後遍曆每個字元，看是否是合法的值，如果全部是合法值才允許粘貼，只要有一個非法值就禁止粘貼。charAt、charCodeAt(查字元集.doc)
焦點在的時候靠左對齊沒有千分位，焦點不在時靠右對齊千分位。this.style.textAlign='right'
添加千分位的方法，見備忘（*）
========補充知識==================
(?=exp)匹配exp前面的位置
(?=exp) 也叫零寬度正預測先行斷言，它斷言自身出現的位置的後面能匹配運算式exp。比如\b\w+(?=ing\b)，匹配以ing結尾的單詞的前面部分(除了 ing以外的部分)，如尋找I'm singing while you're dancing.時，它會匹配sing和danc。
=============================== 複製代碼代碼如下:function f(){
var txts=document.getElementsByTagName('input');
for(var i=0;i<txts.length;i++){
//斷行符號轉換為tab
txts[i].onkeydown=function(){
if(window.event.keyCode==13){
window.event.keyCode=9;
}
}
txts[i].onpaste=function(){
var usrInput=clipboardData.getData('Text');
var k;
for(var i=0;i<usrInput.length;i++){
k=usrInput.charCodeAt(i);
//只能黏貼.或0-9的數字，參考ASCII字元集。
if((k==46) ||(k>=48 && k<=56)){
}else{
return false;
}
}
}
}
}

千分位(練習代碼)：複製代碼代碼如下:function commafy(n)
{
var re=/\d{1,3}(?=(\d{3})+$)/g; //必須是以\d{3}結尾，前面必須是1-3個數字，但替換的時候，不包含結尾的\d{3}個數字。 var n1=n.replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,“$&,”)+s2;});
　 return n1;
}
function addQianFenWei(txtBox)
{
txtBox.value=commafy(txtBox.value);
}
function removeQianFenWei(txtBox)
{
txtBox.value=txtBox.value.replace(/,/g,"");//如果是replace(',','')是只替換第一個
}

複製代碼代碼如下:<script type="text/javascript">
function commafy(n)
{
var re=/\d{1,3}(?=(\d{3})+$)/g; //匹配1到3個數字後面跟3個數字，但不含最後的3個數字。
var n1=n.replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;});
return n1;
}
function setQFW(){
var objTxt=document.getElementById('txtqfw');
var r='';
for(var i=objTxt.value.length-1;i>=0;i--){
if(i%3==0){
r+=objTxt.value.charAt(i)+',';
}else{
r+=objTxt.value.charAt(i);
}
}
　objTxt.value=r;
//objTxt.value=commafy(objTxt.value);
}
</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More