Native js makes a simple digital keyboard and js digital keyboard

Native js makes a simple digital keyboard and js digital keyboard

I. Cause

Recently paid colleagues said that there are some problems with the numeric keypad; sometimes it is difficult to make a point on mobile devices (.) it is a combination of numbers. Therefore, considering this situation, we recommend that you hand-write a simulated keyboard. It took one night to write a simple keyboard, which was basically usable. Some developers use native js instead of juqery.

Github address: https://github.com/vczero/keyboard

Ii. below

3. Experience address (you need to click input to bring up the keyboard)

URL: http://vczero.github.io/num_key/index.html

4. The code is relatively simple and directly pasted

; (Function (exports) {var KeyBoard = function (input, options) {var body = document. getElementsByTagName ('body') [0]; var DIV_ID = options & options. divId | '_ w_l_h_v_c_z_e_r_o_divid'; if (document. getElementById (DIV_ID) {body. removeChild (document. getElementById (DIV_ID);} this. input = input; this. el = document. createElement ('div '); var self = this; var zIndex = options & options. zIndex | 1000; Var width = options & options. width | '200'; var height = options & options. height | '193px '; var fontSize = options & options. fontSize | '15px '; var backgroundColor = options & options. backgroundColor | '# fff'; var TABLE_ID = options & options. table_id | 'table _ 100'; var mobile = typeof orientation! = 'Undefined'; this. el. id = DIV_ID; this. el. style. position = 'absolute '; this. el. style. left = 0; this. el. style. right = 0; this. el. style. bottom = 0; this. el. style. zIndex = zIndex; this. el. style. width = width; this. el. style. height = height; this. el. style. backgroundColor = backgroundColor; // style var cssStr = '<style type = "text/css">'; cssStr + = '#' + TABLE_ID + '{text-align: center; width: 100%; height: 16 0px; border-top: 1px solid # CECDCE; background-color: # FFF;} '; cssStr + =' # '+ TABLE_ID + 'td {width: 33%; border: 1px solid # ddd; border-right: 0; border-top: 0;} '; if (! Mobile) {cssStr + = '#' + TABLE_ID + 'td: hover {background-color: # 1FB9FF; color: # FFF ;}';} cssStr + = '</style>'; // Button var btnStr = '<div style = "width: 60px; height: 28px; background-color: # 1FB9FF ;'; btnStr + = 'float: right; margin-right: 5px; text-align: center; color: # fff; '; btnStr + = 'line-height: 28px; border-radius: 3px; margin-bottom: 5px; cursor: pointer; "> finished </div> '; // table var tableStr =' <table id =" '+ T ABLE_ID + '"border =" 0 "cellspacing =" 0 "cellpadding =" 0 "> '; tableStr + = '<tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> '; tableStr + = '<tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr> '; tableStr + = '<tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr> '; tableStr + = '<tr> <td style = "background-color: # D3D9DF;">. </td> <td> 0 </td> '; tableStr + =' <td style = "background-color: # D3D9DF; "> Delete </td> </tr> '; tableStr + =' </table> '; this. el. inne RHTML = cssStr + btnStr + tableStr; function addEvent (e) {var ev = e | window. event; var clickEl = ev. element | ev.tar get; var value = clickEl. textContent | clickEl. innerText; if (clickEl. tagName. toLocaleLowerCase () === 'td '& value! = "Delete") {if (self. input) {self. input. value + = value ;}} else if (clickEl. tagName. toLocaleLowerCase () ==== 'div '& value = "done") {body. removeChild (self. el);} else if (clickEl. tagName. toLocaleLowerCase () ==== 'td '& value = "delete") {var num = self. input. value; if (num) {var newNum = num. substr (0, num. length-1); self. input. value = newNum ;}}if (mobile) {this. el. ontouchstart = addEvent;} else {this. el. onclick = addEvent;} body. appendChild (this. el);} exports. keyBoard = KeyBoard;}) (window );

V. Simple demo

<! DOCTYPE html> 
The above is all the content of this article. I hope you will like it.