dom 笔记2_

来源：互联网发布：金融数据分析师累吗编辑：程序博客网时间：2024/05/22 14:51

案例：

无刷新评论

<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="评论" onclick="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%" onclick="moveSelected(document.getElementById('select1'),document.getElementById('select2'))"/>
<input type="button" value="<" style="float:left;width:100%" onclick="moveSelected(document.getElementById('select2'),document.getElementById('select1'))"/> //注释：函数不变，只需改变参数即可，简化程序。

<input type="button" value=">>" style="float:left;width:100%" onclick="moveAll(document.getElementById('select1'),document.getElementById('select2'))"/>
<input type="button" value="<<" style="float:left;width:100%" onclick="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跳转,一句话实现：

onkeydown="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)
onkeydown="return numonKeyDown()"不要写成onkeydown="numonKeyDown()"区分事件响应函数和事件响应函数调用的函数。

文本框右对齐：
<input type="text" style="text-align:right" />
js中this.style.textAlign="right"

禁止粘贴
<input onpaste="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;
         }
     }

<body>

</body>
</html>