今天给大家带来一个基于jQuery的全字母键盘插件(支持全字母大小写切换，数字输入，退格清除，关闭功能，可调整大小和键盘位置(可设置固定在屏幕右下角)，支持鼠标和触屏拖动，并且特意保留了四个常用字符"_","-",".","/"。还有按键记忆功能哦，可自动改变使用频繁按键的背景颜色。

　　效果截图:

　　页面效果参照PolarBear的使用CSS3制作的苹果风格键盘 修改而成，在这里感谢PolarBear的无私分享。

一.代码分享

　　1.Demo页面代码

1 <ul>2     <li><input type="text" placeholder="手机号码后四位" id="numkeyboard1" class="numkeyboard" /></li>3     <li><input type="text"  placeholder="开箱密码"  id="numkeyboard2"  class="numkeyboard"/></li>4     <button type="submit"value="querun">确  认</button>        5 </ul>

　　键盘页面代码(插件中页面键盘的页面代码由js插入)

 1 <ul id='keyboard_5xbogf8c'>  2      <li>1</li>  3      <li>2</li>  4      <li>3</li>  5      <li>4</li>  6      <li>5</li>  7      <li>6</li>  8      <li>7</li>  9      <li>8</li> 10      <li>9</li> 11      <li>0</li> 12      <li>←</li> 13      <li>Q</li> 14      <li>W</li> 15      <li>E</li> 16      <li>R</li> 17      <li>T</li> 18      <li>Y</li> 19      <li>U</li> 20      <li>I</li> 21      <li>O</li> 22      <li>P</li> 23      <li></li> 24      <li>A</li> 25      <li>S</li> 26      <li>D</li> 27      <li>F</li> 28      <li>G</li> 29      <li>H</li> 30      <li>J</li> 31      <li>K</li> 32      <li>L</li> 33      <li>Clear</li> 34      <li>CapsLock</li> 35      <li>Z</li> 36      <li>X</li> 37      <li>C</li> 38      <li>V</li> 39      <li>B</li> 40      <li>N</li> 41      <li>M</li> 42      <li><span>-</span><span>_</span></li> 43      <li><span>/</span><span>.</span></li> 44      <li>Exit</li>     45     <div id="keyboard_5xbogf8c_left"></div>46     <div id="keyboard_5xbogf8c_right"></div>47    </ul>   

　　2.调用

1 $(".numkeyboard").ioskeyboard({2     keyboardRadix:80,//键盘大小基数，实际大小比为9.4，即设置为100时实际大小为940X3303     keyboardRadixMin:40,//键盘大小的最小值，默认为60，实际大小为564X1984     keyboardRadixChange:true,//是否允许用户改变键盘大小,该功能仅能完美支持Chrome26；仅当keyboardRadixMin不小于60时才较好支持Safari内核浏览器5     clickeve:true,//是否绑定元素click事件6     colorchange:true,//是否开启按键记忆功能，如果开启，将随着按键次数的增加加深相应按键的背景颜色7     colorchangeStep:1,//按键背景颜色改变步伐，采用RBG值，默认为RGB(255,255,255),没按一次三个数字都减去步伐值8     colorchangeMin:154//按键背影颜色的最小值，默认为RGB(154,154,154)9 });

二.实现探讨

　　1.元素布局和样式

　　布局没啥好说的，一个按键一个li元素或div等元素(仿回车键我用了俩个li，如果大小不是确定的，这样可能会出现一些问题，所以没有必要还是不要用)，浮动float:left，再用一个父元素包裹起来。

　　css上主要用box-shadow结合active来实现按键动作的视觉效果，比较少用的可能是user-select: none消除元素的选中效果(默认为蓝色遮罩)，还有特别漂亮的渐变背景效果linear-gradient。特别要讲到的是除了父元素的font-size外全部采用em作为单位，这也是做的好处就是只有改变父元素的font-size就可以比例改变所有元素的大小，缺点就是部分浏览器(如chrome)支持的font-size的最小值为12px，所以缩放有一定的限制，需要根据最底层的font-size值来设置最小值。解决方案就是把所有文字全部单独包裹放在每个层的最底层，把字体大小和元素大小独立起来。

　　2.js实现

　　a.如果要用js插入键盘html代码，必须确保一个页面只插入一次。

　　b.键盘的拖动：监听键盘元素上的mousedown事件，当鼠标在键盘上按下时记录鼠标的位置，当鼠标移动时根据鼠标当前的位置与鼠标按下是的位置差来确定移动的距离，同步改变键盘元素的位置。触屏拖动与此类似。

　　c.改变键盘大小：上面讲到过，要比例改变键盘大小，只要改变键盘元素的font-size值即可。所以只需要添加事件来触发就行了，这里是添在键盘的左右上角分别添加了一个透明元素，当在触发此元素上的mousedown事件时根据鼠标拖动的水平距离来比例改变font-size值。

　　d.按键事件：监听每个按键元素的click事件。根据按键的text来确定按下的是哪个键(也可以用index()来判断)，然后做出相应的动作。例如在输入框中写入按键值，大小写切换，退格，清除，关闭键盘等。

　　e.键盘按键记忆功能：纯属无聊才加了这个功能，大家不必在意。实现的方法就是每按一个键，就把这个按键的背景元素rgb全部减去一个常量，直到设定的最小值。所以效果只是简单的白-灰-黑。如果把rgb分开改变的话，效果会更丰富。

　　f.事件键盘模拟事件：模拟实际键盘按下确认键后自动提交的功能，按下Exit后自动提交。由于浏览器的限制，该功能目前只在firefox中测试通过，据说ie8及以下的浏览器都可以，不过没有太大的意义。

　　必较重要的是键盘的每个事件在一个页面内最好是确保只会监听一次，因为事件监听几次触发的时候就会执行几次，如果这样的话，就可能达不到预计效果。例如如果键盘按键的click事件，如果监听多次的话，每一次按键都会在输入框中输入几个键值。

 　　本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端jQuery频道！