文本框模拟密码框+文本选中坐标定位 

<html>
<head>

</head>
<body>
<input type="text" id="password1"  style="width:195px; height:25px; line-height:25px;border: solid 1px #89B4D6;color:#999" value="10086密码" onfocus="javascript:clearPass();" onKeydown="posCursor()"     
          onKeyup="posCursor()"     
          onmousedown="posCursor()"     
          onmouseup="posCursor()"     /> 
<input id="password" type="hidden" name="password"  class="inputs_dl" value="" /> 
<script language="javascript" type="text/javascript">
    var start=0,end=0;  
    var isIE = !(!document.all);    
        function posCursor(){    
             
          var oTextarea = document.getElementById("password1");    
          if(isIE){    
            //selection 当前激活选中区，即高亮文本块，和/或文当中用户可执行某些操作的其它元素。    
            //createRange 从当前文本选中区中创建 TextRange 对象，    
            //或从控件选中区中创建 controlRange 集合。    
            var sTextRange= document.selection.createRange();    
        
            //判断选中的是不是textarea对象    
            if(sTextRange.parentElement()== oTextarea){    
              //创建一个TextRange对象    
              var oTextRange = document.body.createTextRange();    
              //移动文本范围以便范围的开始和结束位置能够完全包含给定元素的文本。    
              oTextRange.moveToElementText(oTextarea);    
                  
              //此时得到两个 TextRange    
              //oTextRange文本域(textarea)中文本的TextRange对象    
              //sTextRange是选中区域文本的TextRange对象    
            
              //compareEndPoints方法介绍，compareEndPoints方法用于比较两个TextRange对象的位置    
              //StartToEnd  比较TextRange开头与参数TextRange的末尾。    
              //StartToStart比较TextRange开头与参数TextRange的开头。    
              //EndToStart  比较TextRange末尾与参数TextRange的开头。    
              //EndToEnd    比较TextRange末尾与参数TextRange的末尾。    
            
              //moveStart方法介绍，更改范围的开始位置    
              //character 按字符移动    
              //word       按单词移动    
              //sentence  按句子移动    
              //textedit  启动编辑动作    
            
              //这里我们比较oTextRange和sTextRange的开头，的到选中区域的开头位置    
              for (start=0; oTextRange.compareEndPoints("StartToStart", sTextRange) < 0; start++){     
                oTextRange.moveStart('character', 1);     
              }    
              //需要计算一下\n的数目(按字符移动的方式不计\n,所以这里加上)     
              for (var i = 0; i <= start; i ++){    
                if (oTextarea.value.charAt(i) == '\n'){     
                  start++;     
                }    
              }     
            
              //再计算一次结束的位置    
              oTextRange.moveToElementText(oTextarea);     
              for (end = 0; oTextRange.compareEndPoints('StartToEnd', sTextRange) < 0; end ++){    
                oTextRange.moveStart('character', 1);    
              }    
              for (var i = 0; i <= end; i ++){    
                if (oTextarea.value.charAt(i) == '\n'){     
                  end++;     
                }    
              }    
            }    
          }else{    
            start = oTextarea.selectionStart;    
            end = oTextarea.selectionEnd;    
          }    
          start;     
          end;    
        }  
    document.getElementById("password1").onkeyup=function(){
        var pass = document.getElementById("password1"); 
        var j_pass = document.getElementById("password"); 
        var ss=this.value.substring(pass.value.length-1,pass.value.length);
        
        if(event.keyCode==8){ 
        if((start || end) && (start != end)){
            var ssi=j_pass.value;
            j_pass.value=ssi.substring(0,start);
            j_pass.value=j_pass.value+(ssi.substring(end,ssi.length))
        }
        else{
            j_pass.value=j_pass.value.substring(0,j_pass.value.length-1);
        }
            
        }
        else{
            j_pass.value=j_pass.value+ss; 
        }

        this.value=this.value.replace(/./g,'*');
    }
    function clearPass(){ 
        document.getElementById("password1").value=""; 
        document.getElementById("password").value=""; 
    }

 
</script>
</body>
</html>

非原创

posted @ 2018-03-08 17:59  文幻  阅读(736)  评论(0)  编辑  收藏  举报