回车实现Tab跳转金额文本框省市联动选择歌曲选择的实现

最新推荐文章于 2021-05-26 07:20:24 发布

after tomorrow

最新推荐文章于 2021-05-26 07:20:24 发布

阅读量249

点赞数

分类专栏： javascript

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

windows.event.KeyCode
案例1：回车实现Tab跳转。
响应文本框的onKeyDown事件，window.event.keyCode获得用户点击的keyCode。

keyCode和ASCII不是完全一致，主键盘的1和小键盘的1的ASCII一样，
但是keyCode不一样。回车的keyCode为 13，Tab的keyCode为9。

<body οnkeydοwn="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：金额文本框
财务相关系统中涉及到金额的文本框有如下要求：
进入金额文本文本框不使用中文输入法
不能输入非数字
焦点在文本框中时文本框左对齐；焦点离开文本框时文本框右对齐，显示千分位

1、禁用输入法：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)。

οnkeydοwn="return numonKeyDown()" 不要写成οnkeydοwn="numonKeyDown()" 区分事件响应函数和事件响应函数调用的函数。
2.禁止粘贴(伟大的 Tester)，<input οnpaste=“return false;” ，太暴力，应该只是禁止粘贴非法值。
在onpaste中通过clipboardData.getData(‘Text')取到粘贴板中的值，
然后遍历每个字符，看是否是合法的值，
如果全部是合法值才允许粘贴，只要有一个非法值就禁止粘贴。charAt、charCodeAt(查字符集.doc)

3、焦点在的时候左对齐没有千分位，焦点不在时右对齐千分位。this.style.textAlign='right'
<html>
<head>
<title></title>
<script type="text/javascript">
function initEvent() {
var txtAmount = document.getElementById("txtAmount");
txtAmount.onkeydown = onkeydownEvent; //键盘输入时效果，限制非法字符输入
txtAmount.onblur = onblurEvent;//焦点离开时的效果(数字向右对齐)
txtAmount.onpaste = function () {
var text = clipboardData.getData("text");
if (valid(text)) {
clipboardData.setData("text", text);
}
else {
return false;
}
}; //禁止粘贴1.4
}
function valid(txt) {
var i = 0;
var len = txt.length;
for (i = 0; i < len; i++) {
var checkTxt = txt.charCodeAt(i); //使用charCodeAt方法，方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。
if (checkTxt == 37 || checkTxt == 8 || checkTxt == 39 || checkTxt == 46 || checkTxt == 190 || checkTxt == 110 || (checkTxt >= 48 && checkTxt <= 57) || (checkTxt >= 96 && checkTxt <= 105)) {
continue;

}
else {
return false;
}
}
return true;

}
function onkeydownEvent() {
if (event.keyCode == 37 ||event.keyCode==8|| event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190 || event.keyCode == 110 || (event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {
}
else {
return false;
}
}
function onblurEvent() {
// var txtAmount = document.getElementById("txtAmount");
this.style.textAlign = "right";
// txtAmount.value = txtAmount.value + '';
this.value = commafy(this.value);
}

function commafy(n) {
n = n + "";
var re = /(-?\d+)(\d{3})/;
while (re.test(n)) {
n = n.replace(re, "$1,$2");
}
return n;
// var n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) { return s1.replace(re, "$1,$2") + s2; });
//return n1;
}

</script>
</head>
<body οnlοad="initEvent()">
<input type="text" id="txtAmount" οnclick="this.style.textAlign='left';this.value=this.value.replace(/,/g,'');" />
</body>
</html>

省市联动选择
<html>
<head>
<title>省市</title>
<script language="javascript" type="text/javascript">
var data={"四川":["成都","巴中"],"重庆":["永川","万州"]};
function loadProv()
{
///遍历省
var prov=document.getElementById("prov");
for(var key in data){
var option=document.createElement("option");
option.value=key;
option.innerText=key;
prov.appendChild(option);
}
}
///市操作;
function provchange()
{
var prov=document.getElementById("prov");
var city=document.getElementById("city");
///获取选中项的省名;
var provName=prov.value;
if(provName=="none"){
for(var i=city.childNodes.length-1;i>=0;i--){
var option=city.childNodes[i];///获取第一个节点的value;
city.removeChild(option);
}
var citis=data[provName];///取出相关的市;即：获取相关的value;
for(var i=0;i<citis.length;i++){
var option=document.createElement("option");
option.value=citis[i];
option.innerText=citis[i];
city.appendChild(option);
}
return;
}
///清除旧的市列表数据操作;
//city.option.length=0;
//for(var i=0;i<city.childNodes.length;i++){ ///有问题:当删除一个后，那么后面的向前补齐，那么就会有漏网之鱼；
for(var i=city.childNodes.length-1;i>=0;i--){
var option=city.childNodes[i];///获取第一个节点的value;
city.removeChild(option);
}
var citis=data[provName];///取出相关的市;即：获取相关的value;
for(var i=0;i<citis.length;i++){
var option=document.createElement("option");
option.value=citis[i];
option.innerText=citis[i];
city.appendChild(option);
}
}
</script>
</head>
<body οnlοad="loadProv();">
<select id="prov" οnchange="provchange()">
<option value="none">请选择省</option>
</select>
<br>
<select id="city">
</select>
</body>
</html>

歌曲选择的实现
<html>
<head>
<title>歌曲选择的实现</title>
<script language="javascript" type="text/javascript">
function selAll()
{
var playlist=document.getElementById("divlist");
var inputs=playlist.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var inp=inputs[i];
if(inp.type=="checkbox"){
inp.checked="checked";
}
}
}
function none()
{
///全不选
var playlist=document.getElementById("divlist");
var inputs=playlist.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
var inp=inputs[i];
if(inp.type=="checkbox"){
inp.checked="";
}
}
}
///反选操作;
function f()
{
var playlist=document.getElementById("divlist");
var inputs=playlist.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){

var inp=inputs[i];
if(inp.type=="checkbox"){
// if(inp.checked==true){
// inp.checked=" ";
// }
// else{

//inp.checked="checked";
//}
inp.checked=!inp.checked;
}
}
}
</script>
</head>
<body>
<div id="divlist">
<input type="checkbox" id="p1" ><label for="p1">伤心太平洋</label>
<input type="checkbox" id="p2"><label for="p2">兄弟</label>
<input type="checkbox" id="p3"><label for="p3">有梦的人</label>
<br>
<input type="button" value="全选" οnclick="selAll();"><input type="button" οnclick="none();" value="全不选"><input type="button" value="反选" οnclick="f()">
</div>
</body>
</html>

<html>
<head>
<title></title>
<script type="text/javascript">
//移动所有项。
function moveAllOptions(selone, seltwo) {

//获得selone中的每个option
var opts = selone.getElementsByTagName('option');

//这种循环有问题，不能从0开始，因为opts就像集合一样，
//每次将自己的元素加到别的元素下的时候这个元素就从自己子元素中自动删除。
// for (var i = 0; i < opts.length; i++) {
// //将selone中的每个option都加到了seltwo中。
// seltwo.appendChild(opts[i]);
// }

for (var i = opts.length - 1; i >= 0; i--) {
//将selone中的每个option都加到了seltwo中。
seltwo.appendChild(opts[i]);
}

}

//移动选中项
function moveSelectedOptions(selone, seltwo) {

//获取第一个元素中的所有的option
var opts = selone.getElementsByTagName('option');
for (var i = opts.length - 1; i >= 0; i--) {
if (opts[i].selected == true) {
seltwo.appendChild(opts[i]);
}
}

}
</script>
</head>
<body>
<select id="selNum1" multiple="multiple">
<option>添加</option>
<option>修改</option>
<option>删除</option>
<option>保存</option>
</select>
<input type="button" name="name" value=">>" οnclick="moveAllOptions(document.getElementById('selNum1'),document.getElementById('selNum2'));" />
<input type="button" name="name" value=">" οnclick="moveSelectedOptions(document.getElementById('selNum1'),document.getElementById('selNum2'));" />
<input type="button" name="name" value="<" οnclick="moveSelectedOptions(document.getElementById('selNum2'),document.getElementById('selNum1'));" />
<input type="button" name="name" value="<<" οnclick="moveAllOptions(document.getElementById('selNum2'),document.getElementById('selNum1'));" />
<select id="selNum2" multiple="multiple">
</select>
</body>
</html>