可以支持多中格式的JS键盘

答案：/* 
 * JavaScript Virtual Keyboard (ATM-style numpad variant), version 2.3 
 * 
 * Copyright (C) 2006-2007 Dmitriy Khudorozhkov 
 * 
 * This software is provided "as-is", without any express or implied warranty. 
 * In no event will the author be held liable for any damages arising from the 
 * use of this software. 
 * 
 * Permission is granted to anyone to use this software for any purpose, 
 * including commercial applications, and to alter it and redistribute it 
 * freely, subject to the following restrictions: 
 * 
 * 1. The origin of this software must not be misrepresented; you must not 
 *    claim that you wrote the original software. If you use this software 
 *    in a product, an acknowledgment in the product documentation would be 
 *    appreciated but is not required. 
 * 
 * 2. Altered source versions must be plainly marked as such, and must not be 
 *    misrepresented as being the original software. 
 * 
 * 3. This notice may not be removed or altered from any source distribution. 
 * 
 *  - Dmitriy Khudorozhkov, kh_dmitry2001@mail.ru 
 */ 

function VATMpad(container_id, callback_ref, font_name, font_size, 
                   font_color, bg_color, key_color, border_color, 
                   show_click, click_font_color, click_bg_color, 
                   click_border_color, do_embed) 
{ 
  return this._construct(container_id, callback_ref, font_name, font_size, 
                         font_color, bg_color, key_color, border_color, 
                         show_click, click_font_color, click_bg_color, 
                         click_border_color, do_embed); 
} 

VATMpad.prototype = { 

  kbArray: [], 

  _setup_event: function(elem, eventType, handler) 
  { 
    return (elem.attachEvent ? elem.attachEvent("on" + eventType, handler) : ((elem.addEventListener) ? elem.addEventListener(eventType, handler, false) : null)); 
  }, 

  _start_flash: function(in_el) 
  { 
    function getColor(str, posOne, posTwo) 
    { 
      if(/rgb\((\d+),\s(\d+),\s(\d+)\)/.exec(str)) // try to detect Mozilla-style rgb value. 
      { 
        switch(posOne) 
        { 
          case 1: return parseInt(RegExp.$1, 10); 
          case 2: return parseInt(RegExp.$2, 10); 
          case 3: return parseInt(RegExp.$3, 10); 
          default: return 0; 
        } 
      } 
      else // standard (#xxxxxx or #xxx) way 
        return str.length == 4 ? parseInt(str.substr(posOne, 1) + str.substr(posOne, 1), 16) : parseInt(str.substr(posTwo, 2), 16); 
    } 

    function getR(color_string) 
    { return getColor(color_string, 1, 1); } 

    function getG(color_string) 
    { return getColor(color_string, 2, 3); } 

    function getB(color_string) 
    { return getColor(color_string, 3, 5); } 

    var el = in_el.time ? in_el : (in_el.company && in_el.company.time ? in_el.company : null); 
    if(el) 
    { 
      el.time = 0; 
      clearInterval(el.timer); 
    } 

    var vkb = this; 
    var ftc = vkb.fontcolor, bgc = vkb.keycolor, brc = vkb.bordercolor; 

    // Special fixes for simple/dead/modifier keys: 

    if(in_el.dead) 
      ftc = vkb.deadcolor; 

    if(((in_el.innerHTML == "Shift") && vkb.Shift) || ((in_el.innerHTML == "Caps") && vkb.Caps) || ((in_el.innerHTML == "AltGr") && vkb.AltGr)) 
      bgc = vkb.lic; 

    // Extract base color values: 
    var fr = getR(ftc), fg = getG(ftc), fb = getB(ftc); 
    var kr = getR(bgc), kg = getG(bgc), kb = getB(bgc); 
    var br = getR(brc), bg = getG(brc), bb = getB(brc); 

    // Extract flash color values: 
    var f_r = getR(vkb.cfc), f_g = getG(vkb.cfc), f_b = getB(vkb.cfc); 
    var k_r = getR(vkb.cbg), k_g = getG(vkb.cbg), k_b = getB(vkb.cbg); 
    var b_r = getR(vkb.cbr), b_g = getG(vkb.cbr), b_b = getB(vkb.cbr); 

    var _shift_colors = function() 
    { 
      function dec2hex(dec) 
      { 
        var hexChars = "0123456789ABCDEF"; 
        var a = dec % 16; 
        var b = (dec - a) / 16; 

        return hexChars.charAt(b) + hexChars.charAt(a) + ""; 
      } 

      in_el.time = !in_el.time ? 10 : (in_el.time - 1); 

      function calc_color(start, end) 
      { return (end - (in_el.time / 10) * (end - start)); } 

      var t_f_r = calc_color(f_r, fr), t_f_g = calc_color(f_g, fg), t_f_b = calc_color(f_b, fb); 
      var t_k_r = calc_color(k_r, kr), t_k_g = calc_color(k_g, kg), t_k_b = calc_color(k_b, kb); 
      var t_b_r = calc_color(b_r, br), t_b_g = calc_color(b_g, bg), t_b_b = calc_color(b_b, bb); 

      in_el.style.color = "#" + dec2hex(t_f_r) + dec2hex(t_f_g) + dec2hex(t_f_b); 
      in_el.style.borderColor = "#" + dec2hex(t_b_r) + dec2hex(t_b_g) + dec2hex(t_b_b); 
      in_el.style.backgroundColor = "#" + dec2hex(t_k_r) + dec2hex(t_k_g) + dec2hex(t_k_b); 

      if(!in_el.time) 
      { 
        clearInterval(in_el.timer); 
        return; 
      } 
    }; 

    _shift_colors(); 

    in_el.timer = window.setInterval(_shift_colors, 50); 
  }, 

  _setup_style: function(obj, top, left, width, height, position, border_color, bg_color, line_height, font_size, font_weight, padding_left, padding_right) 
  { 
    var os = obj.style; 

    if(top)    os.top = top; 
    if(left)   os.left = left; 
    if(width)  os.width = width; 
    if(height) os.height = height; 

    if(position) os.position = position; 

    if(border_color) os.border = "1px solid " + border_color; 
    if(bg_color) os.backgroundColor = bg_color; 

    os.textAlign = "center"; 

    if(line_height) os.lineHeight = line_height; 
    if(font_size)   os.fontSize   = font_size; 

    os.fontWeight = font_weight || "bold"; 

    if(padding_left)  os.paddingLeft  = padding_left; 
    if(padding_right) os.paddingRight = padding_right; 
  }, 

  _setup_key: function(parent, id, top, left, width, height, border_color, bg_color, line_height, font_size, font_weight, padding_left, padding_right) 
  { 
    var _id = this.Cntr.id + id; 
    var exists = document.getElementById(_id); 

    var key = exists ? exists.parentNode : document.createElement("DIV"); 
    this._setup_style(key, top, left, width, height, "absolute"); 

    var key_sub = exists || document.createElement("DIV"); 
    key.appendChild(key_sub); parent.appendChild(key); 

    this._setup_style(key_sub, "", "", "", line_height, "relative", border_color, bg_color, line_height, font_size, font_weight, padding_left, padding_right); 
    key_sub.id = _id; 

    if(!exists) this._setup_event(key_sub, 'mousedown', this._generic_callback_proc); 

    return key_sub; 
  }, 

  _findX: function(obj) 
  { return (obj && obj.parentNode) ? parseFloat(obj.parentNode.offsetLeft) : 0; }, 

  _findY: function(obj) 
  { return (obj && obj.parentNode) ? parseFloat(obj.parentNode.offsetTop) : 0; }, 

  _findW: function(obj) 
  { return (obj && obj.parentNode) ? parseFloat(obj.parentNode.offsetWidth) : 0; }, 

  _findH: function(obj) 
  { return (obj && obj.parentNode) ? parseFloat(obj.parentNode.offsetHeight) : 0; }, 

  _construct: function(container_id, callback_ref, font_name, font_size, font_color, bg_color, key_color, 
                       border_color, show_click, click_font_color, click_bg_color, click_border_color, do_embed) 
  { 
    var exists  = (this.Cntr != undefined), ct = exists ? this.Cntr : document.getElementById(container_id); 
    var changed = (font_size && (font_size != this.fontsize)); 

    this._Callback = ((typeof(callback_ref) == "function") && ((callback_ref.le

上一个：用js实现的抽象CSS圆角效果!!
下一个：清华大学出版的事半功倍系列 javascript全部源代码