Native js makes simple keypad _ javascript skills

This article will share with you a small example of using native javascript to implement a simple digital keyboard. The code is very simple. For more information, see. 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. pId | '_ w_l_h_v_c_z_e_r_o_pid'; if (document. getElementById (DIV_ID) {body. removeChild (document. getElementById (DIV_ID);} this. input = input; this. el = document. createElement ('P'); var self = this; var zIndex = options & options. zIndex | 1000; var wi Dth = 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 =''; // Button var btnStr ='
Complete
'; // Table var tableStr ='
 
 
  
  
'; TableStr + ='
  
  '; TableStr + =' 
   '; TableStr + =' 
   '; TableStr + =' 
   '; TableStr + =' 
    '; TableStr + =' 
  
 
   
 
    
1
 
    
2
 
    
3
 
   
 
    
4
 
    
5
 
    
6
 
   
 
    
7
 
    
8
 
    
9
 
   
 
    
.
 
    
0
Delete
 
   
 
 
'; This. el. innerHTML = 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 () ==== 'P' & value = "finished") {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

          
      Analog keypad