Home > Web Front-end > JS Tutorial > js amount text box implementation code_form special effects

js amount text box implementation code_form special effects

WBOY
Release: 2016-05-16 17:56:07
Original
1051 people have browsed it
Case 1: Enter to realize Tab jump.
In response to the onKeyDown event of the text box, window.event.keyCode gets the keyCode clicked by the user.
(*) keyCode and ASCII are not exactly the same. The ASCII of 1 on the main keyboard and 1 on the small keyboard are the same, but the keyCode is different. The keyCode of Enter is 13, and the keyCode of Tab is 9.

Only a few keys can be replaced, most of them cannot. There is a permissions issue.
Keyboard codes are different from ASCII codes.
keyCode
8: Backspace key
46: delete
37-40: Direction keys
48-57: Numbers in the small keyboard area
96-105: Main keyboard area Numbers
110, 190: Decimal points in the small keyboard area and main keyboard area
189, 109: Negative signs in the small keyboard area and main keyboard area
13: Enter
9: Tab is that handle The focus moves to the next text box.
Case 2: Amount text box
Text boxes involving amounts in financial related systems have the following requirements:
Do not use the Chinese input method when entering the amount text text box
Cannot enter Non-numeric
When the focus is in the text box, the text box is left aligned; when the focus leaves the text box, the text box is right aligned and the thousandths are displayed
Disable input method: style="ime-mode:disabled" //Compatible with FF , IE, not compatible with Chrome
It is forbidden to type illegal values, only these can be typed (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()" Do not write onkeydown="numonKeyDown()" to distinguish between event response functions and functions called by event response functions.
Disable pasting (great Tester), When the focus is on, it is left-aligned without a thousandth digit, and when the focus is not on, it is right-aligned with a thousandth digit. this.style.textAlign='right'
For the method of adding thousandths, see notes (*)
========Supplementary knowledge============== =====
(?=exp) matches the position before exp.
(?=exp) is also called a zero-width positive lookahead assertion. It asserts that the expression exp can be matched after the position where it appears. For example, w (?=ingb) matches the front part of a word ending in ing (other than ing). For example, when searching for I'm singing while you're dancing., it will match sing and dance.
================================
Copy Code The code is as follows:

function f(){
var txts=document.getElementsByTagName('input');
for(var i= 0;i//Enter is converted to 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;ik=usrInput.charCodeAt(i);
//Can only be pasted. Or 0-9 Numbers, refer to the ASCII character set.
if((k==46) ||(k>=48 && k<=56)){
}else{
return false;
}
}
}
}
}

Thousands (practice code):
Copy code The code is as follows:

function commafy(n)
{
var re=/d{1,3}(?=(d{3}) $)/g; / / must end with d{3}, and must be preceded by 1-3 numbers, but when replacing, the ending d{3} numbers are not included. 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,"");//If replace(',','') only replaces the first
}

Copy code The code is as follows:


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template