网页小键盘/软键盘

以下为详细代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>软键盘</title>
  <script src="/UploadFiles/demo/base.js"></script>
  <script>
  $.fn.extend({//元素类
  plugins_keyboard:function(options){//软键盘
  return this.each(function(){
  var self = this;
  var settings = {type:"xlabi.com",button:true,ordered:false,loadinit:false,event:"focus",same:false,change:"each",shadow:true,other:"xlabi.com"};
  //type[mini,设置mini，则呈现数字小键盘],
  //button[boolean,是否有按钮],
  //ordered[boolean,排列类型是否为顺序，顺序如23456，89012，abcde，xyzabc；乱序如13425，acdeb],
  //loadinit[boolean是否在页面加载时候加载],
  //event[click/focus有按钮情况下点击按钮或聚焦展开,没按钮则固定为聚焦],
  //same[boolean,多个插件调用时，每个同类键盘[如，数字迷你键盘为一类]排序都相同,设置为true时候change失效],
  //change[each,设置为each每次展开都变，否则排序加载时变一次],
  //shadow[boolean,是否有投影].
  //other[min2,附加功能，配置为mini2，在type为"mini"的情况下进入第二种模式].
  $.extend(settings, options);
  $._state?$._state:$.extend({_state:{_kb_first:true,_kb_keysort:{}},author:"xlabi.com"});
  var _kb = {
  _init:function(){//初始化
  this._html._before();
  this._settings._set();
  this._fn._bindonce();
  },
  _settings:{//用来解析options有顺序
  _set:function(){
  this._event();
  this._type();
  this._other();
  this._button();
  this._ordered();
  this._same();
  this._change();
  this._loadinit();
  this._shadow();
  },
  _type:function(){
  _kb._global._type = settings.type;
  _kb._adjust._before();
  },
  _other:function(){
  _kb._global._other = settings.other;
  },
  _button:function(){
  if(settings.button){
  _kb._html._settings._button();
  _kb._adjust._settings._button();
  _kb._event._button();
  }
  _kb._event._self();
  },
  _ordered:function(){
  _kb._global._ordered = settings.ordered;
  },
  _loadinit:function(){
  if(settings.loadinit){
  _kb._fn._set_panel();
  };
  },
  _event:function(){
  _kb._global._event = settings.event;
  $(document).keydown(function(e){if(e.keyCode==9){_kb._fn._set_all_hide();_kb._event._self_tabkey();};});
  },
  _same:function(){
  _kb._global._same = settings.same;
  },
  _change:function(){
  _kb._global._change = settings.change;
  },
  _shadow:function(){
  _kb._global._shadow = settings.shadow;
  }
  },
  _global:{//全局参数
  _key:{ w:[
  "a","b","c","d","e","f","g","h","i","j","k","l","m"
  ,"n","o","p","q","r","s","t","u","v","w","x","y","z"
  ]
  ,c:[
  {e:"_",s:"-"},{e:"=",s:"+"},{e:"\\",s:"|"},{e:"[",s:"{"},{e:"]",s:"}"}
  ,{e:";",s:":"},{e:"'",s:"\""},{e:",",s:"<"},{e:".",s:">"},{e:"/",s:"?"}
  ]
  ,n:[
  {e:"`",s:"~"}
  ,{e:1,s:"!"},{e:2,s:"@"},{e:3,s:"#"},{e:4,s:"$"},{e:5,s:"%"}
  ,{e:6,s:"^"},{e:7,s:"&"},{e:8,s:"*"},{e:9,s:"("},{e:0,s:")"}
  ]
  ,num:[1,2,3,4,5,6,7,8,9,0]
  },
  _shift:"up",
  _capslock:"off"
  },
  _obj:{
  _key:{}
  },
  _html:{//全局dom对象
  _before:function(){//加载前需要加载的html
  $(self).wrap("<div class=\"hs_keyboard_wrap\"></div>");
  _kb._obj._wrap=$(self).parent(".hs_keyboard_wrap");
  },
  _settings:{//配置后需要增加的html
  _button:function(){
  _kb._obj._button = $("<div class=\"hs_keyboard_btn\"></div>").appendTo(_kb._obj._wrap);
  },
  _shadow:function(){
  _kb._obj._shadow = $("<div class=\"hs_keyboard_shadow\"></div>").appendTo(_kb._obj._wrap);
  },
  _iframe:function(){
  _kb._obj._iframe = $("<iframe></iframe>").appendTo(_kb._obj._wrap);
  }
  },
  _after:function(){//加载后需要加载的html
  _kb._obj._panel=$("<div class=\"hs_keyboard_panel\"></div>").appendTo(_kb._obj._wrap);
  if(_kb._global._type!="mini"){
  _kb._obj._key._n = $("<ul class=\"hs_keyboard_key_n\"></ul>").appendTo(_kb._obj._panel);
  _kb._obj._key._c = $("<ul class=\"hs_keyboard_key_c\"></ul>").appendTo(_kb._obj._panel);
  _kb._obj._key._w = $("<dl class=\"hs_keyboard_key_w\"></dl>").appendTo(_kb._obj._panel);
  _kb._obj._close = $("<span class=\"hs_keyboard_close\">exit</span>").appendTo(_kb._obj._panel);
  _kb._obj._backspace = $("<div class=\"hs_keyboard_backspace\">←</div>").appendTo(_kb._obj._panel);
  _kb._obj._capslock = $("<div class=\"hs_keyboard_capslock\">capslock</div>").appendTo(_kb._obj._panel);
  _kb._obj._shift = $("<div class=\"hs_keyboard_shift\">shift</div>").appendTo(_kb._obj._panel);
  _kb._obj._enter = $("<div class=\"hs_keyboard_enter\">enter</div>").appendTo(_kb._obj._panel);
  }else{
  if(_kb._global._other=="mini2"){
  _kb._obj._close = $("<span class=\"hs_keyboard_close\">exit</span>").appendTo(_kb._obj._panel);
  _kb._obj._backspace = $("<div class=\"hs_keyboard_backspace\">←</div>").appendTo(_kb._obj._panel);
  }else{
  _kb._obj._enter = $("<div class=\"hs_keyboard_enter\">enter</div>").appendTo(_kb._obj._panel);
  };
  _kb._obj._key._num = $("<dl class=\"hs_keyboard_key_num\"></dl>").appendTo(_kb._obj._panel);
  }
  }
  },
  _event:{//事件绑定
  _bind:function(){
  this._wrap();
  this._key();
  if(_kb._global._type!="mini"){
  this._close();
  this._backspace();
  this._capslock();
  this._shift();
  this._enter();
  }else{
  if(_kb._global._other=="mini2"){
  this._close();
  this._backspace();
  }else{
  this._enter();
  };
  };
  },
  _self:function(){
  if(_kb._global._event=="focus"){
  $(self).mousedown(function(){
  _kb._fn._set_self();
  });
  };
  if(_kb._global._event=="click"){$(self).click(function(){_kb._fn._set_all_hide();});};
  },
  _self_tabkey:function(){
  if(_kb._global._event=="focus"){
  $(self).unbind("focus").focus(function(){
  _kb._fn._set_self();
  $(self).unbind("focus");
  });
  };
  },
  _wrap:function(){
  _kb._obj._wrap.unbind("mousedown").mousedown(function(){
  $(self).unbind("focus");
  _kb._event._focus();
  return false;
  });
  },
  _button:function(){
  _kb._obj._button.click(function(){
  _kb._fn._set_button();
  });
  _kb._obj._button.mousedown(function(){
  $(this).addClass("hs_keyboard_btn_down");
  });
  },
  _key:function(){
  $("ul div,dl div",_kb._obj._panel).unbind("click").click(function(){
  _kb._fn._set_keyval($(this));
  });
  },
  _close:function(){
  _kb._obj._close.click(function(){
  _kb._fn._set_close();
  });
  },
  _backspace:function(){
  _kb._obj._backspace.click(function(){
  _kb._fn._set_backspace();
  });
  },
  _capslock:function(){
  _kb._obj._capslock.click(function(){
  _kb._fn._set_capslock($(this));
  });
  },
  _shift:function(){
  _kb._obj._shift.click(function(){
  _kb._fn._set_shift($(this));
  });
  },
  _enter:function(){
  _kb._obj._enter.click(function(){
  _kb._fn._set_enter();
  });
  },
  _focus:function(){
  $(self).focus();
  if($.browser.msie){
  var obj =$(self)[0];
  var txt =obj.createTextRange();
  txt.moveStart('character',obj.value.length);
  txt.collapse(true);
  txt.select();
  }
  }
  },
  _adjust:{//html调整
  _v:{
  pos:{p:{t:0,r:0,b:0,l:0},pts:{t:2,r:2,b:2,l:2}}//p面板位置pts投影差距
  },
  _before:function(){//加载前
  $(self).css("float","left");
  _kb._obj._wrap.css({"border":[$(self).css("border-bottom-style"),$(self).css("border-bottom-color"),$(self).css("border-bottom-width")].join(" ")});
  $(self).css({"border":"0 none","margin":0});
  _kb._global._self_h=_kb._obj._wrap.outerHeight()-parseInt(_kb._obj._wrap.css("border-top-width"));
  if(_kb._global._type=="mini"){
  _kb._obj._wrap.addClass("hs_keyboard_wrap_mini");
  }
  },
  _settings:{
  _button:function(){
  $(self).width($(self).width()-_kb._obj._button.width());
  _kb._obj._button.height($(self).innerHeight());
  }
  },
  _after:function(){//加载后
  _kb._obj._panel.css({top:_kb._global._self_h});
  if(_kb._obj._shadow){
  _kb._obj._shadow.css({top:_kb._global._self_h+2});
  }
  }
  },
  _fn:{//方法集
  _set_panel:function(){//加载键盘
  _kb._html._after();
  if(_kb._global._shadow){_kb._html._settings._shadow();};
  if(_kb._global._same||_kb._global._change!="each"){_kb._fn._set_keysort();};
  _kb._event._bind();
  _kb._adjust._after();
  },
  _set_ckey:function(e,s){
  return "<li><div><em>"+e+"</em><sup>"+s+"</sup></div></li>";
  },
  _set_wkey:function(w){
  return "<dd><div>"+w+"</div></dd>"
  },
  _set_keysort:function(){//生成键并设置排序
  $("ul,dl",_kb._obj._panel).empty();
  if(_kb._global._type!="mini"){_kb._fn._reset_shift_capslock();}
  if(_kb._global._type!="mini"){
  if(!$._state._kb_keysort._normalkb){
  var c=[],w=[],n=[];
  $.each(_kb._fn._get_sort_array(_kb._global._key.n),function(i,con){
  n[i]=_kb._fn._set_ckey(con.e,con.s);
  });
  $.each(_kb._fn._get_sort_array(_kb._global._key.c),function(i,con){
  c[i]=_kb._fn._set_ckey(con.e,con.s);
  });
  $.each(_kb._fn._get_sort_array(_kb._global._key.w),function(i,con){
  w[i]=_kb._fn._set_wkey(con);
  });
  }
  }else{
  if(!$._state._kb_keysort._num){
  var num=[];
  $.each(_kb._fn._get_sort_array(_kb._global._key.num),function(i,con){
  num[i]=_kb._fn._set_wkey(con);
  });
  }
  }
  if(_kb._global._same){
  if(_kb._global._type!="mini"){
  $._state._kb_keysort._normalkb=$._state._kb_keysort._normalkb||{_n:n,_c:c,_w:w}
  c=$._state._kb_keysort._normalkb._c;
  w=$._state._kb_keysort._normalkb._w;
  n=$._state._kb_keysort._normalkb._n;
  }else{
  $._state._kb_keysort._num=$._state._kb_keysort._num||num;
  num=$._state._kb_keysort._num;
  }
  }
  if(_kb._global._type!="mini"){
  _kb._obj._key._n.append(n.join(""));
  _kb._obj._key._c.append(c.join(""));
  _kb._obj._key._w.append(w.join(""));
  }else{
  _kb._obj._key._num.append(num.join(""));
  }
  },
  _set_self:function(){
  if(!_kb._fn._is_show()){
  if(!_kb._obj._panel){_kb._fn._set_panel();};
  _kb._fn._set_all_hide();
  _kb._fn._set_show();
  };
  },
  _set_keyval:function(obj){
  var get_keyval=function(o){
  var em = $("em",o);
  var t = em.size()==0?o.text():em.text();
  return t
  }
  $(self).val(""+$(self).val()+get_keyval(obj));
  _kb._event._focus();
  },
  _set_button:function(){
  if(!_kb._obj._panel){_kb._fn._set_panel();}
  _kb._event._focus();
  _kb._fn._is_show()?_kb._fn._set_hide():_kb._fn._set_show();
  },
  _set_backspace:function(){
  var pw = $(self).val();
  $(self).val(pw.substring(0, pw.length-1));
  _kb._event._focus();
  },
  _set_shift:function(obj){
  if(_kb._global._shift=="up"){
  _kb._global._shift="down";
  obj.addClass("hs_keyboard_shift_down");
  }else{
  _kb._global._shift="up";
  obj.removeClass("hs_keyboard_shift_down");
  };
  $("li div",_kb._obj._panel).each(function(){
  var c = $("em",$(this)).text();
  $("em",$(this)).text($("sup",$(this)).text());
  $("sup",$(this)).text(c);
  });
  this._set_wchange();
  },
  _reset_shift_capslock:function(){
  _kb._global._shift="up";
  _kb._global._capslock="off";
  _kb._obj._shift.removeClass("hs_keyboard_shift_down");
  _kb._obj._capslock.removeClass("hs_keyboard_capslock_on");
  },
  _set_capslock:function(obj){
  if(_kb._global._capslock=="on"){
  _kb._global._capslock="off";
  obj.removeClass("hs_keyboard_capslock_on")
  }else{
  _kb._global._capslock="on";
  obj.addClass("hs_keyboard_capslock_on")
  };
  this._set_wchange();
  },
  _set_wchange:function(){
  $("dd div",_kb._obj._panel).each(function(){
  var c = $(this).text();
  if(c.toLowerCase()==c){
  $(this).text(c.toUpperCase());
  }else{
  $(this).text(c.toLowerCase());
  };
  });
  _kb._event._focus();
  },
  _set_close:function(){
  _kb._fn._set_hide();
  _kb._event._focus();
  },
  _set_enter:function(){
  _kb._fn._set_hide();
  $(self).blur();
  },
  _set_hide:function(){
  _kb._obj._panel.hide();
  _kb._fn._set_all_hide();
  },
  _set_show:function(){
  _kb._fn._set_all_hide();
  _kb._obj._panel.show();
  _kb._html._settings._iframe();
  _kb._obj._iframe.css({top:_kb._global._self_h});
  if(!_kb._global._same){
  if(_kb._obj._panel&&_kb._global._change=="each"){_kb._fn._set_keysort();_kb._event._key();};
  }
  if(_kb._obj._shadow){_kb._obj._shadow.show();};
  },
  _set_all_hide:function(){
  $(".hs_keyboard_panel,.hs_keyboard_shadow").hide();
  $(".hs_keyboard_wrap iframe").remove();
  },
  _is_show:function(){
  if(_kb._obj._panel&&(_kb._obj._panel.css("display")=="block")){
  return true;
  }else{
  return false;
  }
  },
  _get_sort_array:function(arr){//返回排序数组
  var te = [], t={},tn,m = arr.length;
  if(_kb._global._ordered){
  var tn = parseInt(Math.random()*m);
  for(var i=0;i<m;i++){
  te[i]=(tn+i>=m)?arr[tn+i-m]:arr[tn+i]
  }
  }else{
  for(var i=0;i<m;){
  tn = parseInt(Math.random()*m);
  if(!t['_'+tn]){
  te[i++] = arr[tn]
  t['_'+tn] = 1;
  }
  }
  }
  return te;
  },
  _bindonce:function(){
  if($._state._kb_first){
  $(document).bind({mousedown:function(){$(self).unbind("focus");_kb._fn._set_all_hide();},
  mouseup:function(){$(".hs_keyboard_btn").removeClass("hs_keyboard_btn_down");}
  });
  $(".hs_keyboard_panel div").live("mouseover",function(){$(this).addClass("hs_keyboard_key_hover")});
  $(".hs_keyboard_panel div").live("mouseout",function(){$(this).removeClass("hs_keyboard_key_hover")});
  $(".hs_keyboard_close").live("mouseover",function(){$(this).addClass("hs_keyboard_close_hover")});
  $(".hs_keyboard_close").live("mouseout",function(){$(this).removeClass("hs_keyboard_close_hover")});
  $._state._kb_first = false;
  }
  }
  }
  }
  _kb._init();
  })
  }
  })
  $(function(){
  $(".hs_keyboard2").plugins_keyboard();
  $(".hs_keyboard").plugins_keyboard({type:"mini"});
  $(".hs_keyboard3").plugins_keyboard({type:"mini",other:"mini2"});
  })
  </script>
  <style>
  body{ font-family:Verdana, Geneva, sans-serif}
  input{ width:150px; height:14px; border:1px solid #1774b3; font-size:12px; padding:2px 0 4px 4px; margin:10px;}
  .hs_keyboard_wrap{display:inline-block;*display:inline;zoom:1;position:relative;font-family:Verdana, Geneva, sans-serif; line-height:20px;font-weight:normal;z-index:1000; font-size:12px; border:1px solid #1774b3}
  .hs_keyboard_shadow,
  .hs_keyboard_panel{position:absolute; z-index:2; display:none; top:0px; left:-1px; width:406px; background:#1774b3; border:1px solid #2159a1; line-height:20px; overflow:hidden; height:112px;}
  .hs_keyboard_wrap iframe{ height:116px;width:410px;top:0px; left:-1px; position:absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity:0; z-index:0}
  .hs_keyboard_shadow{z-index:1;border:1px solid #666;background:#000;top:0px; left:1px;filter:alpha(opacity=30);-moz-opacity:0.3;opacity: 0.3; }
  .hs_keyboard_btn{ float:left; border:0px solid #ccc;line-height:8px;background:1px center no-repeat; width:22px;}
  .hs_keyboard_btn_down{background:-37px center no-repeat;}
  .hs_keyboard_backspace,
  .hs_keyboard_shift,
  .hs_keyboard_capslock,
  .hs_keyboard_close,
  .hs_keyboard_enter{cursor:default;font-size:10px;background:#eff7fe; border:1px solid #2159a1; text-align:center; height:22px; width:52px; overflow:hidden; position:absolute; z-index:2}
  .hs_keyboard_capslock{ position:absolute; right:2px; top:30px;}
  .hs_keyboard_backspace{ position:absolute; right:31px; top:2px;font-size:14px; line-height:22px;*line-height:22px!important;*line-height:26px;}
  .hs_keyboard_close{background:#feeeee; border:1px solid #2159a1; color:#900;display:block; top:2px; right:2px; width:23px;}
  .hs_keyboard_close_hover{border:1px solid #2159a1;background:#FCC; color:#900;}
  .hs_keyboard_shift{ position:absolute; left:2px; top:30px}
  ul.hs_keyboard_key_n{ position:absolute; left:2px; top:2px;}
  ul.hs_keyboard_key_c{position:absolute; left:60px; top:30px;}
  dl.hs_keyboard_key_w{position:absolute; left:2px; top:58px;width:408px}
  .hs_keyboard_enter{ position:absolute; right:2px; top:86px}
  .hs_keyboard_panel dl,
  .hs_keyboard_panel dl dd,
  .hs_keyboard_panel ul,
  .hs_keyboard_panel ul li{ padding:0; margin:0;list-style:none; float:left}
  .hs_keyboard_panel dl dd div,
  .hs_keyboard_panel ul li div{ font-size:11px;cursor:pointer; background:#eff7fe; border:1px solid #2159a1; width:23px; height:22px; text-align:center;}
  .hs_keyboard_panel ul li,
  .hs_keyboard_panel dl dd{padding:0 4px 4px 0;}
  .hs_keyboard_panel ul li div em{ font-size:12px; color:#000; font-style:normal; padding-right:2px; cursor:pointer}
  .hs_keyboard_panel ul li div sup{ font-size:12px; color:#999;cursor:pointer}
  .clearit{ clear:both; overflow:hidden; height:0;}
  .hs_keyboard_key_hover{ background:#bff6ae!important; color:#033!important}
  .hs_keyboard_shift_down,
  .hs_keyboard_capslock_on{background:#c4e2fc!important; color:#2159a1!important}
  /*mini数字键盘*/
  .hs_keyboard_key_num{ width:100px; position:absolute; top:2px; left:2px}
  .hs_keyboard_wrap_mini dl.hs_keyboard_key_num dd div{ font-size:12px}
  .hs_keyboard_wrap_mini .hs_keyboard_shadow,
  .hs_keyboard_wrap_mini .hs_keyboard_panel{width:87px;}
  .hs_keyboard_wrap_mini iframe{ width:91px;}
  .hs_keyboard_wrap_mini .hs_keyboard_close{ top:86px; right:2px;}
  .hs_keyboard_wrap_mini .hs_keyboard_backspace{ top:86px; right:31px; width:23px;}
  .hs_keyboard_wrap_mini .hs_keyboard_btn{background:-75px center no-repeat;}
  .hs_keyboard_wrap_mini .hs_keyboard_btn_down{background:-114px center no-repeat;}
  .hs_keyboard_wrap_mini .hs_keyboard_btn,
  .hs_keyboard_wrap_mini .hs_keyboard_btn_down,
  .hs_keyboard_btn,
  .hs_keyboard_btn_down{background-image:url(/UploadFiles/demo/hs_keyboard_btn.gif)}
  @media screen and (-webkit-min-device-pixel-ratio:0)
  {
  .hs_keyboard_close,
  .hs_keyboard_backspace{ line-height:30px}
  .hs_keyboard_panel{line-height:16px;}
  .hs_keyboard_close,
  .hs_keyboard_enter,
  .hs_keyboard_capslock,
  .hs_keyboard_shift,
  .hs_keyboard_panel dl dd{ line-height:22px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif}
  }
  @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
  {
  .hs_keyboard_close,
  .hs_keyboard_backspace{ line-height:20px}
  .hs_keyboard_panel{line-height:16px;}
  .hs_keyboard_enter,
  .hs_keyboard_capslock,
  .hs_keyboard_shift,
  .hs_keyboard_panel dl dd{ line-height:22px}
  }
  </style>
  </head>
  <input type="text" class="hs_keyboard" />
  <input type="text" class="hs_keyboard2" />
  <input type="text" class="hs_keyboard3" />
  <br />
  <select>
  <option>sddddddddddddddddddddddddddddddddd测试ie6的select是否被挡住</option>
  </select>
  <div style=" background:#CCC; height:50px;">投影测试</div>
  <p>var settings = {button:true,ordered:false,loadinit:false,event:&quot;focus&quot;,same:false,change:&quot;each&quot;,shadow:true};<br />
  以上为默认配置</p>
  <p>说明：</p>
  <p>//type[mini,设置mini，则呈现数字小键盘],<br />
  //button[boolean,是否有按钮],<br />
  //ordered[boolean,排列类型是否为顺序，顺序如23456，89012，abcde，xyzabc；乱序如13425，acdeb],<br />
  //loadinit[boolean是否在页面加载时候加载],<br />
  //event[click/focus有按钮情况下点击按钮或聚焦展开,没按钮则固定为聚焦],<br />
  //same[boolean,多个插件调用时，每个同类键盘[如，数字迷你键盘为一类]排序都相同,设置为true时候change失效],<br />
  //change[each,设置为each每次展开都变，否则排序加载时变一次],<br />
  //shadow[boolean,是否有投影], <br />
  //other[min2,附加功能，配置为mini2，在type为mini的情况下进入第二种模式].<br />
  <br />
  </p>
  <p>调用方法：</p>
  <p>$(function(){<br />
  $(&quot;.hs_keyboard&quot;).plugins_keyboard(settings);<br />
  })<br />
  </p>
  <p><br />
  </p>
  </body>
  </html>

前一页:点击密码框弹出小键盘

后一页:以前的QQ强聊不管了，这个是非常管用的QQ强聊