数字软键盘

jquery插件--数字软键盘

 

 

if(jQuery) (function($){ //定义键盘代码

var _numkeybordhtml = "<div id=\"numkeybord\">\n"   

      + "<table id=\"main\"><tr>\n"

+ "<td colspan=\"2\" id=\"esc\">退出</td>\n"        

+ "<td colspan=\"2\" id=\"back\">退格</td></tr>\n"      

   + "<tr><td class=\"key\">7</td>\n"       

  + "<td class=\"key\">8</td>\n"    

     + "<td class=\"key\">9</td>\n"    

     + "<td class=\"key\">4</td></tr>\n"      

   + "<tr><td class=\"key\">5</td>\n"       

  + "<td class=\"key\">6</td>\n"       

  + "<td class=\"key\">1</td>\n"       

  + "<td class=\"key\">2</td></tr>\n"    

     + "<tr><td class=\"key\">3</td>\n"       

  + "<td class=\"key\">0</td>\n"

+ "<td colspan=\"2\" id=\"enter\">确定</td></tr>\n"      

   + "</table>\n"      

   + "</div>\n";

//定义插件

jQuery.fn.numkeybord = function(_option){   

  //键盘追加到网页中   

  $(document.body).append(_numkeybordhtml);    

  var _obj = this;   

   jQuery.each(_obj,function(i,_o){   

   $(_o).bind('click.show',function(){ _show(this); });   

  });   

   $("#numkeybord td#esc,#numkeybord td#enter").bind('click.hide',function(){      _hide();  

   });    

  $("#numkeybord td.key").bind('click.returnkey',function(){    

  var tmp     = $("#numkeybord").attr("target");     

var obj_tmp    = $("#"+tmp);       

_returnkey(obj_tmp,$(this).text());      

  $(this).blur();  

   }); 

    $("#numkeybord td#back").bind('click.back',function(){   

   var tmp     = $("#numkeybord").attr("target");   

   var obj_tmp    = $("#"+tmp);      

  _back(obj_tmp);   

  });    

  var _isover = false;   

  var _isover2 = false;   

   $("#numkeybord").hover(function(){   

   _isover = true;    

},   

  function(){    

  _isover = false;    

});      

$(_obj).hover(function(){   

   _isover2 = true;

    },   

  function(){    

  _isover2 = false;   

  });    

  $(document).click(function(){    

  $("#debug").text(_isover + "|" + _isover2);  

    if(_isover == false && _isover2 == false){

      $("#numkeybord").css({display:'none'});   

   }  

   });  

   if(_option == null)  

    return;  

   else{     

   if(_option.enter == false)   

    $("td#enter").unbind('click.hide').css({color:"#999999"});     

   if(_option.esc == false)  

     $("td#esc").unbind('click.hide').css({color:"#999999"});    

    if(_option.back == false)  

     $("td#back").unbind('click.back').css({color:"#999999"});  

   }

}

//键盘与元素绑定及显示

function _show(_input){  

   var _offset     = $(_input).offset();    

var _left     = _offset.left;   

  var _top     = _offset.top + $(_input).height() + ($.browser.msie ? 5 : 6);      $("#numkeybord").attr("target",_input.id).css({left:_left + "px",top:_top +"px",display:'block'});  

   _focus(_input);

}

//输入操作

function _returnkey(_input,_val){   

  if($(_input).val().length >= $(_input).attr("maxlength")) return;  

   var tmpval = $(_input).val() + _val;

    $(_input).val(tmpval);  

   //$(_input).focus(); 

    _focus(_input);

}

//光标返回

function _focus(_input){  

   //$(_input).focus();   

  if($.browser.msie){    

  var rng = $(_input)[0].createTextRange();  

    rng.collapse(false);    

  rng.select();    

}else{   

   $(_input).focus();   

  }

}

//退格操作

function _back(_input){   

  var _len = $(_input).val().length;  

   var _tmp = $(_input).val();     

$(_input).val(_tmp.substr(0,_len-1));    

  _focus(_input);

}

//键盘关闭

function _hide(_input){    

var tmp     = $("#numkeybord").attr("target");   

  var obj_tmp    = $("#"+tmp);   

  $("#numkeybord").css({display:'none'});   

  //$(obj_tmp).focus();   

  _focus(obj_tmp); } })(jQuery);

 

============================================================================

页面上调用方法：

<script language="javascript" src="jquery.js"></script>  <script language="javascript" src="numkeybord.js"></script>

$(function(){ 

 $("#password").numkeybord(); });

 

样式：   

  <style>    

  #numkeybord{ position:absolute; border:#999999 solid 1px; background:#FFFFFF; width:104px; font-size:12px; line-height:20px; display:none;}    

  #numkeybord #main{ list-style:none; border:#999900 dashed 0px; margin:0px auto 1px auto; width:104px; padding:0px; overflow:auto; }    

  #numkeybord #main td{ text-align:center; border:#CCCCCC solid 1px; padding:1px; margin:1px; width:20px; height:20px; display:block; float:left; cursor:pointer;}    

  #numkeybord #main td#back{ width:46px;}     

#numkeybord #main td#enter{ width:46px;}     

#numkeybord #main td#esc{ width:46px;}    

  #numkeybord #main td#hover{ background:#333333; color:#FFFFFF;} </style>