案例:
无刷新评论
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function AddComment(){
var nickname=document.getElementById("nickname").value;
var comment=document.getElementById("comment").value;
var tab=document.getElementById("tab");
var tr=tab.insertRow(-1);
var td1=tr.insertCell(-1);
td1.innerText=nickname;
var td2=tr.insertCell(-1);
td2.innerText=comment;
}
</script>
</head>
<body>
帖子内容!!!!!!!!!!!!!!!!!!!!
<p>评论区:</p>
<table id="tab">
<tr>
<td>冷冷:</td>
<td>沙发耶!</td>
</tr>
</table>
昵称:
<input type="text" id="nickname"/>
<br/>
<textarea id="comment"></textarea>
<br/>
<input type="button" value="评论" οnclick="AddComment()"/>
</body>
</html>
原理:直接在table中插入行、单元格,把要显示的内容添加到单元格上,从而不需要刷新页面让其显示。
案例:权限选择
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function moveSelected(selectSrc,selectDes){
for(var i=selectSrc.childNodes.length-1;i>=0;i--){
var option=selectSrc.childNodes[i];
if(option.selected==true){
selectSrc.removeChild(option);
option.selected=false;
selectDes.appendChild(option);
}
}
}
function moveAll(selectSrc,selectDes){
for(var i=selectSrc.childNodes.length-1;i>=0;i--){
var option=selectSrc.childNodes[i];
selectSrc.removeChild(option);
//option.selected=false;
selectDes.appendChild(option);
}
}
</script>
</head>
<body>
<select id="select1" multiple="multiple" style="float:left;width:80px;height:100px;">
<option value="">添加</option>
<option value="">删除</option>
<option value="">修改</option>
<option value="">查询</option>
<option value="">打印</option>
</select>
<div style="float:left;width:50px">
<input type="button" value=">" style="float:left;width:100%" οnclick="moveSelected(document.getElementById('select1'),document.getElementById('select2'))"/>
<input type="button" value="<" style="float:left;width:100%" οnclick="moveSelected(document.getElementById('select2'),document.getElementById('select1'))"/> //注释:函数不变,只需改变参数即可,简化程序。
<input type="button" value=">>" style="float:left;width:100%" οnclick="moveAll(document.getElementById('select1'),document.getElementById('select2'))"/>
<input type="button" value="<<" style="float:left;width:100%" οnclick="moveAll(document.getElementById('select2'),document.getElementById('select1'))"/>
</div>
<select id="select2" multiple="multiple" style="float:left;width:80px"></select>
</body>
</html>
keyCode说明:
8:退格键
9:Tab键
13:回车
46:delete
37-40:方向键
48-57:小键盘区的数字
96-105:主键盘区的数字
110、190:小键盘区和主键盘区的小数点
189、109:小键盘区和主键盘区的负号
回车实现Tab跳转,一句话实现:
οnkeydοwn="if(window.event.keyCode==13){window.event.keyCode=9;}"
案例:金额文本框
财务相关系统中涉及到金额的文本框有如下要求:
·进入金额文本框不使用中文输入法
·不能输入非数字
·焦点在文本框中时文本框左对齐;焦点离开文本框时文本框右对齐,显示千分位。(
焦点在的时候左对齐没有千分位,焦点不在时右对齐显示千分位。)
禁用输入法:
style="ime-mode:disabled"
禁止键入非法值,只有这些才能被键入
(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()"区分事件响应函数和事件响应函数调用的函数。
文本框右对齐:
<input type="text" style="text-align:right" />
js中this.style.textAlign="right"
禁止粘贴
<input οnpaste="return false;",太暴力,应该只是禁止粘贴非法值。
在onpaste中通过clipboardData.getData('Text')取到粘贴板中的值,然后遍历每个字符,看是否是合法的值,如果全部是合法值才允许粘贴,只要有一个非法值就禁止粘贴。charAt、charCodeAt(i):取得i的ascii值。
添加千分位的方法(正则表达式)
function commafy(n){
var re=/\d{1,3}(?=(\d{3})+$)/g;
var nl=n.replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;});
return n1;
}
代码如下:
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function numKeyDown() {
var k = window.event.keyCode;
//判断k是否是合法的ascii
if ((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)) {
if (window.event.keyCode == 13) { //如果按的是回车键,当成tab键使用
window.event.keyCode = 9;
}
return true;
}
else {
return false;
}
}
function isValidNum(k) {
return ((k == 189) || (k == 109) || (k == 190) || (k == 110) ||
(k >= 48 && k <= 57) || (k >= 96 && k <= 105))
}
function numPaste() {//对粘贴板中的内容进行检查
var str = clipboardData.getData("Text");
for (var i = 0; i < str.length; i++) {
var asc = str.charCodeAt(i); //取得每一个字符的KeyCode
if (!isValidNum(asc)) {//遇到一个非法值就认为要粘贴的内容是非法的,return false
return false;
}
}
}
function commafy(n) { //添加千分位(正则表达式)
var re = /\d{1,3}(?=(\d{3})+$)/g;
var nl = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) { return s1.replace(re, "$&,") + s2; });
return n1;
}
</script>
</head>
<body>
<input type="text" style="ime-mode:disabled" οnblur="this.style.textAlign='right';this.value=commafy(this.value);"
οnfοcus="this.style.textAlign='left';this.value=this.value.replace(/,/g,'');" οnkeydοwn="return numKeyDown()" οnpaste="return numPaste()"/>
<input type="text" style="text-align:right"/>
</body>
</html>