javascript代码实例教程-基于jQuery的软键盘

发布时间:2019-01-27 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-基于jQuery的软键盘脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。  前些天写了一个基于基于jQuery的数字键盘,今天给大家带来一个基于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=&#39;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     <p id="keyboard_5xbogf8c_left"></p>

46     <p id="keyboard_5xbogf8c_right"></p>

47    </ul>   

复制代码

  2.调用

 

复制代码

1 $(".numkeyboard").ioskeyboard({

2     keyboardRadix:80,//键盘大小基数,实际大小比为9.4,即设置为100时实际大小为940X330

3     keyboardRadiXMin:40,//键盘大小的最小值,默认为60,实际大小为564X198

4     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 });

复制代码

  3.CSS代码

 

 

复制代码

  1 #keyboard_5xbogf8c ,#keyboard_5xbogf8c li  {

  2   list-style: none;

  3   margin: 0;

  4   padding: 0;

  5 -webkit-user-select: none;

  6 -moz-user-select: none;

  7 -ms-user-select: none;

  8 user-select: none;

  9 }

 10 

 11 #keyboard_5xbogf8c{

 12     position:fixed;

 13     z-index:10;

 14     width: 9.30em;

 15      background: rgba(158,180,185,1);

 16     background: -webkit-gradient(linear, 0 50%, 100% 0,From( rgba(158,180,185,1)) ,to(rgba(169,156,173,1)),color-stop(50%, rgba(222,157,193,1)));

 17     background: linear-gradient(60deg, rgba(158,180,185,1), rgba(222,157,193,1) 50%, rgba(169,156,173,1) 100%);

 18     padding-left: 0.1em;

 19     border-radius: 0.05em;

 20     padding-top: 0.1em;

 21     box-shadow: 0 0.05em 0.1em rgba(0,0,0,.5);

 22     display:none;

 23     font-Size:100px;

 24     right:0.05em;

 25     bottom:0.05em;

 26     -webkit-text-size-adjust:none;

 27 }

 28 #keyboard_5xbogf8c_left{

 29     position:absolute;    

 30     width:0.2em;

 31     height:0.2em;

 32     font-size:1em;    

 33     top:0em;

 34     left:0em;

 35     cursor:nw-resize;

 36 }

 37 #keyboard_5xbogf8c_right{

 38     position:absolute;    

 39     width:0.2em;

 40     height:0.2em;

 41     font-size:1em;    

 42     top:0em;

 43     right:0em;

 44     cursor:ne-resize;

 45 }

 46 

 47 #keyboard_5xbogf8c ::after {

 48     content: "";

 49     display: table;

 50     clear: both;

 51 }

 52 

 53 #keyboard_5xbogf8c li{    

 54   position:relative;

 55   font-family: arial,"Vrinda";

 56   width: 2.88em;

 57   height: 2.8em;

 58   line-height: 2.8em;

 59   background-color: rgba(255,255,255,.8);

 60   border-radius: 0.2em;

 61   float: left;

 62   text-align: center;

 63   font-size:0.25em;

 64   vertical-align: text-top;

 65   margin-right: 0.4em;

 66   margin-bottom: 0.4em;

 67   box-shadow: 0 0.2em 0.4em rgba(0,0,0,.5);

 68   cursor: pointer;

 69   position: relative;

 70   overflow:visible ;

 71 }

 72 

 73 #keyboard_5xbogf8c li:active {

 74     box-shadow: inset 0 0.04em 0 rgba(0,0,0,.5);

 75     top:0.08em;

 76 }

 77 

 78 #keyboard_5xbogf8c li:nth-child(11),#keyboard_5xbogf8c li:nth-child(43),#keyboard_5xbogf8c li:nth-child(22)  {

 79     background: rgba(188,188,188,.5);

 80     font-size: 0.20em;

 81     width: 5em;

 82     height: 3.5em;

 83     line-height:3.5em;

 84     border-radius: 0.25em;

 85     margin-right: 0.5em;

 86     margin-bottom: 0.5em;

 87     box-shadow: 0 0.25em 0.5em rgba(0,0,0,.5);

 88 }

 89 #keyboard_5xbogf8c li:nth-child(43)  {  

 90     width: 3.6em;

 91 }

 92 

 93 #keyboard_5xbogf8c li:nth-child(12) {

 94     margin-left: 0.96em;

 95 }

 96 #keyboard_5xbogf8c li:nth-child(23)  {

 97    margin-left: 1.92em;

 98 }

 99 #keyboard_5xbogf8c li:nth-child(22)  {

100     width: 3.6em;

101     height: 4.2em;

102     background-color: rgba(238,238,238,1);

103     border-bottom-right-radius:0em;

104     border-bottom-left-radius:0em;

105     position:absolute;

106     top:4.5em;

107     right:0em;

108     box-shadow: inset 0 0em 0 rgba(0,0,0,.5);

109 }

110 

111 #keyboard_5xbogf8c li:nth-child(32)  {

112    width: 5.04em;

113    top:0;

114    background-color: rgba(238,238,238,1);

115    border-top-right-radius:0em;

116    padding-left:0.32em;

117    box-shadow: inset 0 0em 0 rgba(0,0,0,.5);

118    

119 }

120 

121 #keyboard_5xbogf8c li:nth-child(33){

122     font-size: 0.20em;

123     width: 5em;

124     height: 3.5em;

125     line-height:3.5em;

126     border-radius: 0.25em;

127     margin-right: 0.5em;

128     margin-bottom: 0.5em;

129     box-shadow: 0 0.25em 0.5em rgba(0,0,0,.5);

130 }

131 

132 #keyboard_5xbogf8c li:nth-child(41) {

133   box-sizing: border-box;

134   padding-top: 0.6em;

135 }

136 

137 #keyboard_5xbogf8c li:nth-child(41) span {

138   display: block;

139   line-height: 0.6;

140 }

141 

142 #keyboard_5xbogf8c li:nth-child(42) {

143   box-sizing: border-box;

144   padding-top: 0.6em;

145 }

146 

147 #keyboard_5xbogf8c li:nth-child(42) span {

148   display: block;

149   line-height: 0.6;

150 }

复制代码

  

  4.JS插件

 

 

复制代码

  1 /* 

  2 * ioskeyboard 1.0 

  3 * Copyright (c) 2014 BowenLuo https://www.luobo.COM

  4 * Date: 2014-06-08

  5 * Example:$(".numkeyboard").ioskeyboard({keyboardRadix:80,clickeve:true});

  6 */ 

  7 (function($){ 

  8 $.fn.ioskeyboard = function(options){ 

  9 VAR defaults = { 

 10     keyboardRadix:100,//键盘大小基数,实际大小比为9.4,即设置为100时实际大小为940X330

 11     keyboardRadixMin:60,//键盘大小的最小值,默认为60,实际大小为564X198

 12     keyboardRadixChange:true,//是否允许用户改变键盘大小,该功能仅能完美支持Chrome26;仅当keyboardRadixMin不小于60时,完美支持Safari内核浏览器

 13     clickeve:true,//是否绑定元素click事件

 14     colorchange:true,//是否开启按键记忆功能,如果开启,将随着按键次数的增加加深相应按键的背景颜色

 15     colorchangeStep:1,//按键背景颜色改变步伐,采用RBG值,默认为RGB(255,255,255),没按一次三个数字都减去步伐值

 16     colorchangeMin:154//按键背影颜色的最小值,默认为RGB(154,154,154)

 17 } 

 18 var options = $.extend(defaults, options); 

 19 var numkeyboardcount = 0;

 20 var activeinputele;

 21 var keyboardRadix = options.keyboardRadix;

 22 var keyboardRadixMin = options.keyboardRadixMin;

 23 var colorchange = options.colorchange;

 24 var colorchangeStep = options.colorchangeStep;

 25 var colorchangeMin = options.colorchangeMin;

 26 var bMouse = false;

 27 var BToch = false;

 28 var MAction = false;

 29 var MTouch = false;

 30 var keyfixed = false;

 31 if(keyboardRadix<keyboardRadixMin){

 32     keyboardRadix = keyboardRadixMin;

 33 }

 34 this.each(function(){ 

 35     numkeyboardcount++;

 36     //添加键盘

 37     if(numkeyboardcount<2){

 38     $("body").append("<ul id='keyboard_5xbogf8c'>"+

 39     "<li>1</li>"+

 40     "<li>2</li>"+

 41     "<li>3</li>"+

 42     "<li>4</li>"+

 43     "<li>5</li>"+

 44     "<li>6</li>"+

 45     "<li>7</li>"+

 46     "<li>8</li>"+

 47     "<li>9</li>"+

 48     "<li>0</li>"+

 49     "<li>←</li>"+

 50     "<li>Q</li>"+

 51     "<li>W</li>"+

 52     "<li>E</li>"+

 53     "<li>R</li>"+

 54     "<li>T</li>"+

 55     "<li>Y</li>"+

 56     "<li>U</li>"+

 57     "<li>I</li>"+

 58     "<li>O</li>"+

 59     "<li>P</li>"+

 60     "<li></li>"+

 61     "<li>A</li>"+

 62     "<li>S</li>"+

 63     "<li>D</li>"+

 64     "<li>F</li>"+

 65     "<li>G</li>"+

 66     "<li>H</li>"+

 67     "<li>J</li>"+

 68     "<li>K</li>"+

 69     "<li>L</li>"+

 70     "<li>Exit</li>"+

 71     "<li>CapsLock</li>"+

 72     "<li>Z</li>"+

 73     "<li>X</li>"+

 74     "<li>C</li>"+

 75     "<li>V</li>"+

 76     "<li>B</li>"+

 77     "<li>N</li>"+

 78     "<li>M</li>"+

 79     "<li><span>-</span><span>_</span></li>"+

 80     "<li><span>/</span><span>.</span></li>"+

 81     "<li>Clear</li>"+

 82     "<p id='keyboard_5xbogf8c_left'></p>"+

 83     "<p id='keyboard_5xbogf8c_right'></p>"+

 84   "</ul>");    

 85     }    

 86     

 87     var inputele = $(this);

 88     var keyboard =$("#keyboard_5xbogf8c");

 89     var keys = keyboard.children("li");

 90     var hiddenbutton = keyboard.children("p");

 91     keyboard.css({"font-size":keyboardRadix+"px"});

 92     

 93     //keyboard.css({"position":"fixed","right":"0.05em","bottom":"0.05em"});

 94     exit();

 95     var shiftbool = false;

 96     if(numkeyboardcount<2){

 97     if(options.keyboardRadixChange){

 98         BmouseDrag();

 99         BtouchDrag();

100     }

101     keyboard.dblclick(function(){

102         if(keyfixed){

103             keyfixed = false;

104         }else{

105             keyboard.css({"position":"fixed","right":"0.05em","bottom":"0.05em"});

106             keyfixed = true;

107         }

108     });

109     keys.click(function(event){

110     var keyele = $(this);

111     var keytext = keyele.text();

112     var evebool = true;    

113     if(keytext==="CapsLock"){

114         activeinputele[0].focus();

115         if(shiftbool){

116             keyele.css({background:"rgba(255,255,255,.9)"});

117             shiftbool = false;

118         }else{

119             keyele.css({background:"rgba(188,188,188,.5)"});

120             shiftbool = true;

121         }

122         

123         evebool = false;

124     }

125     if(keytext==="Exit"||keytext.length<1){

126         simulateKeyEvent(activeinputele[0],13);

127         exit();

128         evebool = false;

129     }

130     if(keytext==="←"){

131         activeinputele[0].focus();

132         backspace();

133         evebool = false;

134     }

135     if(keytext==="Clear"){

136         activeinputele[0].focus();

137         keyclear();

138         evebool = false;

139     }

140     if(evebool){

141         if(shiftbool){

142             if(keytext.length===2){

143                 keytext = keytext.substring(0,1);

144             }

145         }else{

146             if(keytext.length===2){    

147                 keytext = keytext.substring(1,2);

148             }else{

149                 keytext = keytext.toLowerCase();    

150             }

151                     

152         }

153         clickkey(keytext);

154         if(colorchange){

155             var oldbabkground = $(this).css("background").split(',')[0].split('(')[1];

156             var newbabkground = oldbabkground-colorchangeStep;

157             if(newbabkground<colorchangeMin){

158                 newbabkground = colorchangeMin;

159                 alert("min")

160             }

161              $(this).css("background","rgba("+newbabkground+","+newbabkground+","+newbabkground+",.9)");

162         }

163     }    

164     })

165     keyboard.children("li:eq("+21+")").mousedown(function(event){

166         $(this).css({top:"4.6em", "box-shadow": "inset 0 0.04em 0 rgba(0,0,0,.5)"});

167         keyboard.children("li:eq("+31+")").css({top:"0.1em","box-shadow": "inset 0 0em 0 rgba(0,0,0,.5)"});

168     })

169     .mouseup(function(event){

170         $(this).css({top:"4.5em","box-shadow":" inset 0 0em 0 rgba(0,0,0,.5)"});

171         keyboard.children("li:eq("+31+")").css({top:"0px","box-shadow":" inset 0 0em 0 rgba(0,0,0,.5)"});

172     });

173     keyboard.children("li:eq("+31+")").mousedown(function(event){

174         $(this).css({top:"0.1em","box-shadow": "inset 0 0em 0 rgba(0,0,0,.5)"});

175         keyboard.children("li:eq("+21+")").css({top:"4.6em", "box-shadow": "inset 0 0.04em 0 rgba(0,0,0,.5)"});

176     })

177     .mouseup(function(event){

178         $(this).css({top:"0px","box-shadow":" inset 0 0em 0 rgba(0,0,0,.5)"});

179         keyboard.children("li:eq("+21+")").css({top:"4.5em","box-shadow":" inset 0 0em 0 rgba(0,0,0,.5)"});

180     });

181     }

182 

183     inputele.focus(function(event){    

184         activeinputele = inputele;

185         var p = GetScreenPosition(this);

186         if(keyboard.css("display")=="none"){

187             keyboard.css({"display":"block"});

188             mouseDrag();

189             touchDrag();        

190         }});

191         

192     if(options.clickeve){        

193         inputele.click(function(){    

194         activeinputele = inputele;

195         var p = GetScreenPosition(this);

196         if(keyboard.css("display")=="none"){        

197             keyboard.css({"display":"block"});

198             mouseDrag();

199             touchDrag();

200         }});

201     }

202     

203     function GetScreenPosition(object) {

204         var position = {};            

205         position.x = object.offsetLeft;

206         position.y = object.offsetTop;

207         while (object.offsetParent) {

208             position.x = position.x + object.offsetParent.offsetLeft;

209             position.y = position.y + object.offsetParent.offsetTop;

210             if (object == document.getelementsbytagname("body")[0]) {

211                 break;

212             }

213             else{

214                 object = object.offsetParent;

215             }

216         }

217         return position;

218     }    

219         

220     function keyclear(){

221          activeinputele.val("");

222     }

223     function backspace(){

224         var inputtext = activeinputele.val();

225         if(inputtext.length>0){

226             inputtext = inputtext.substring(0,inputtext.length-1);

227             activeinputele.val(inputtext);

228         }    

229     }    

230     function clickkey(key){

231         var inputtext = activeinputele.val();

232         inputtext = inputtext+key;        

233         activeinputele.val(inputtext);

234         activeinputele[0].focus();

235     }    

236     

237     function exit(){    

238         keyboard.css({"display":"none"});

239     }

240     

241     

242     function BmouseDrag(){

243         var eventEle = hiddenbutton;

244         var eventEleId; 

245         var moveEle = keyboard;

246         var stx = etx = curX  = 0;

247         var keyboarDFontsize = +moveEle.css("font-size").split('px')[0];

248         var tempsize;

249         eventEle.mousedown(function(event){

250             bMouse = true;

251             stx = event.pageX;    

252             keyboardfontsize = +moveEle.css("font-size").split('px')[0];

253             eventEleId = $(this).attr('id');

254             event.preventDefault();

255         });

256         $("body").mouSEMove(function(event){            

257         if(bMouse){

258             var curX = event.pageX-stx;

259             if(eventEleId==="keyboard_5xbogf8c_left"){

260                 tempsize = keyboardfontsize-Math.ceil(curX/10);

261             }

262             if(eventEleId==="keyboard_5xbogf8c_right"){

263                 tempsize = keyboardfontsize+Math.ceil(curX/10);

264             }

265             if(tempsize<keyboardRadixMin){

266                 tempsize=keyboardRadixMin;

267             }

268             moveEle.css({"font-size":tempsize});

269             event.PReventDefault();

270         }});

271         $("body").mouseup(function(event){

272             stx = etx = curX = 0;

273             bMouse = false;            

274         });

275     }

276     

277     function BtouchDrag() {

278         var eventEle = hiddenbutton;

279         var moveEle = keyboard;

280         var eventEleId; 

281         var stx = etx = curX  = 0;

282         var keyboardfontsize = +moveEle.css("font-size").split('px')[0];

283         var tempsize;

284         eventEle.on("touchstart", function(event) { //touchstart

285             var event = event.originalEvent;

286             bToch = true;

287             curX = 0;

288             eventEleId = $(this).attr('id');

289             keyboardfontsize = +moveEle.css("font-size").split('px')[0];

290             stx = event.touches[0].pageX;

291             sty = event.touches[0].pageY;

292         });

293         eventEle.on("touchmove", function(event) {

294             if(bToch){

295             var event = event.originalEvent;

296             

297             curX = event.touches[0].pageX - stx;

298             if(eventEleId==="keyboard_5xbogf8c_left"){

299                 tempsize = keyboardfontsize-Math.ceil(curX/10);

300             }

301             if(eventEleId==="keyboard_5xbogf8c_right"){

302                 tempsize = keyboardfontsize+Math.ceil(curX/10);

303             }

304             if(tempsize<keyboardRadixMin){

305                 tempsize=keyboardRadixMin;

306             }

307             moveEle.css({"font-size":tempsize});

308             event.preventDefault();

309             }

310             

311         });

312         eventEle.on("touchend", function(event) {

313             stx = etx = curX = 0;

314             bToch = false;

315             

316         })

317 

318     }

319 

320     function mouseDrag() {

321         var eventEle = keyboard;

322         var stx = etx = curX = sty = ety = curY = 0;

323         var eleRight =+eventEle.css("right").split('px')[0];

324         var eleBottom = +eventEle.css("bottom").split('px')[0];

325         eventEle.mousedown(function(event){

326         //console.LOG("down",+eventEle.css("right").split('px')[0]);

327             if(!keyfixed){

328                 MAction = true;

329             }

330             //alert(MAction);

331             stx = event.pageX;    

332             sty = event.pageY;

333             //eleRight = +eventEle.css("left").split('px')[0];

334             //eleBottom = +eventEle.css("top").split('px')[0];

335             eleRight = +eventEle.css("right").split('px')[0];

336             eleBottom = +eventEle.css("bottom").split('px')[0];

337             

338             event.preventDefault();

339         });

340         $("body").mousemove(function(event){            

341         if(MAction&&!bMouse){

342             var curX = event.pageX-stx;

343             var curY = event.pageY-sty;                

344             eventEle.css({"right":eleRight-curX,"bottom":eleBottom-curY});

345             //console.log("move",+eventEle.css("right").split('px')[0]);

346             event.preventDefault();

347         }});

348         $("body").mouseup(function(event){

349             stx = etx = curX = sty = ety = curY = 0;

350             MAction = false;

351             //console.log("up",+eventEle.css("right").split('px')[0]);

352                 

353         });

354     }

355     

356     function touchDrag() {

357         var eventEle = keyboard;

358         var stx = sty = etx = ety = curX = curY = 0;

359         var MTouch = false;

360         var eleRight = +eventEle.css("right").split('px')[0];

361         var eleBottom = +eventEle.css("bottom").split('px')[0];        

362         eventEle.on("touchstart", function(event) { //touchstart

363            // alert(bToch);

364             var event = event.originalEvent;

365             MTouch = true;

366             curX = curY = 0;

367             // 元素当前位置

368             eleRight = +eventEle.css("right").split('px')[0];

369             eleBottom = +eventEle.css("bottom").split('px')[0];

370             // 手指位置

371             stx = event.touches[0].pageX;

372             sty = event.touches[0].pageY;

373             //console.log("up",+eventEle.css("right").split('px')[0]);

374         });

375         eventEle.on("touchmove", function(event) {

376         

377             if(MTouch&&!bToch){

378             

379             var event = event.originalEvent;

380             event.preventDefault();

381             curX = event.touches[0].pageX - stx;

382             curY = event.touches[0].pageY - sty;

383             //console.log("move",eleRight-curX);

384             //alert(eleRight+"-"+gundongX);

385             eventEle.css({"right":eleRight-curX,"bottom":eleBottom-curY});

386             }

387             

388         });

389         eventEle.on("touchend", function(event) {

390             stx = etx = curX = sty = ety = curY = 0;

391             MTouch = false;

392             

393         })

394         

395     }

396     

397     //模拟键盘事件,仅支持firefox,ie8-

398     

399     function simulateKeyEvent(target,keyCode)                         

400     {         

401         var customEvent = null;

402         var a = typeof document.createEvent;

403 

404         if(typeof document.createEvent == "function"){//firefox

405             try {

406                 customEvent = document.createEvent("KeyEvents");

407                 customEvent.initKeyEvent("keyPress", true, true,window, false, false, false, false, keyCode, keyCode);     

408                 target.dispatchEvent(customEvent);

409             } catch (ex){

410                 //console.log("This example is only demonstrating event simulation in firefox and IE.");        

411             }

412            

413 

414         } else if (document.createEventObject){ //IE

415             customEvent = document.createEventObject();

416             customEvent.bubbles = true;

417             customEvent.cancelable = true;

418             customEvent.view = window;

419             customEvent.ctrlKey = false;

420             customEvent.altKey = false;

421             customEvent.shiftKey = false;

422             customEvent.metaKey = false;

423             customEvent.keyCode = keyCode;

424             target.fireEvent("onkeypress", customEvent); 

425                    

426         } 

427         else {

428             //console.log("This example is only demonstrating event simulation in firefox and IE.");

429         }

430     }

431     

432 }); 

433 }; 

434 })(jQuery); 

复制代码

二.实现探讨

 

  1.元素布局和样式

 

  布局没啥好说的,一个按键一个li元素或p等元素(仿回车键我用了俩个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事件,如果监听多次的话,每一次按键都会在输入框中输入几个键值。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-基于jQuery的软键盘全部内容,希望文章能够帮你解决javascript代码实例教程-基于jQuery的软键盘所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。