回车实现Tab跳转 金额文本框 省市联动选择 歌曲选择的实现
2016-09-12 20:24
344 查看
windows.event.KeyCode
案例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：金额文本框
财务相关系统中涉及到金额的文本框有如下要求：
进入金额文本文本框不使用中文输入法
不能输入非数字
焦点在文本框中时文本框左对齐；焦点离开文本框时文本框右对齐，显示千分位
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)。
onkeydown="return numonKeyDown()" 不要写成onkeydown="numonKeyDown()" 区分事件响应函数和事件响应函数调用的函数。
2.禁止粘贴(伟大的 Tester)，<input onpaste=“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 onload="initEvent()">
<input type="text" id="txtAmount" onclick="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 onload="loadProv();">
<select id="prov" onchange="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="全选" onclick="selAll();"><input type="button" onclick="none();" value="全不选"><input type="button" value="反选" onclick="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=">>" onclick="moveAllOptions(document.getElementById('selNum1'),document.getElementById('selNum2'));" />
<input type="button" name="name" value=">" onclick="moveSelectedOptions(document.getElementById('selNum1'),document.getElementById('selNum2'));" />
<input type="button" name="name" value="<" onclick="moveSelectedOptions(document.getElementById('selNum2'),document.getElementById('selNum1'));" />
<input type="button" name="name" value="<<" onclick="moveAllOptions(document.getElementById('selNum2'),document.getElementById('selNum1'));" />
<select id="selNum2" multiple="multiple">
</select>
</body>
</html>
案例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：金额文本框
财务相关系统中涉及到金额的文本框有如下要求：
进入金额文本文本框不使用中文输入法
不能输入非数字
焦点在文本框中时文本框左对齐；焦点离开文本框时文本框右对齐，显示千分位
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)。
onkeydown="return numonKeyDown()" 不要写成onkeydown="numonKeyDown()" 区分事件响应函数和事件响应函数调用的函数。
2.禁止粘贴(伟大的 Tester)，<input onpaste=“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 onload="initEvent()">
<input type="text" id="txtAmount" onclick="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 onload="loadProv();">
<select id="prov" onchange="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="全选" onclick="selAll();"><input type="button" onclick="none();" value="全不选"><input type="button" value="反选" onclick="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=">>" onclick="moveAllOptions(document.getElementById('selNum1'),document.getElementById('selNum2'));" />
<input type="button" name="name" value=">" onclick="moveSelectedOptions(document.getElementById('selNum1'),document.getElementById('selNum2'));" />
<input type="button" name="name" value="<" onclick="moveSelectedOptions(document.getElementById('selNum2'),document.getElementById('selNum1'));" />
<input type="button" name="name" value="<<" onclick="moveAllOptions(document.getElementById('selNum2'),document.getElementById('selNum1'));" />
<select id="selNum2" multiple="multiple">
</select>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ubuntu16.04 搭建LAMP环境（为laravel做准备）
- 〖NOIP2006T〗能量项链
- 深入理解内部类
- nginx学习（十一）——nginx的配置系统7之if
- vim编译器
- Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds. If the server require
- C/C++输入输出函数（I/O）总结
- Android时遇到R.java was modified manually! Reverting to generated version!
- Android时遇到R.java was modified manually! Reverting to generated version!
- vue.js入门
- Jstorm调度定制化接口(0.9.5 及高版本)
- HDU 5874 Friends and Enemies
- poj-【2115 C Looooops】
- form表单提交
- 苹果设备按钮样式没效果问题
- Java中的常用排序算法
- Android中LCD背光驱动
- 网络流dinic模板
- Android执行程序或脚本的方法
- HDU 5875 Function