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

网络编程 JavaScript javascript技巧 分类:[default] 更新日期: 2015-08-30

/*
 * 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, [email protected]
 */
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.length == 1) || (callback_ref.length == 2))) ? callback_ref : (this._Callback || null);
    var ff = font_name || this.fontname || "";
    var fs = font_size || this.fontsize || "14px";
    var fc = font_color   || this.fontcolor   || "#000";
    var bg = bg_color     || this.bgcolor     || "#FFF";
    var kc = key_color    || this.keycolor    || "#FFF";
    var bc = border_color || this.bordercolor || "#777";
    this.cfc = click_font_color   || this.cfc || "#CC3300";
    this.cbg = click_bg_color     || this.cbg || "#FF9966";
    this.cbr = click_border_color || this.cbr || "#CC3300";
    this.sc = (show_click == undefined) ? ((this.sc == undefined) ? false : this.sc) : show_click;
    this.fontname = ff, this.fontsize = fs, this.fontcolor = fc;
    this.bgcolor = bg,  this.keycolor = kc, this.bordercolor = bc;
    if(!exists)
    {
      this.Cntr = ct, this.LastKey = null;
      VATMpad.prototype.kbArray[container_id] = this;
    }
    var kb = exists ? ct.childNodes[0] : document.createElement("DIV");
    if(!exists)
    {
      ct.appendChild(kb);
      ct.style.display = "block";
      ct.style.zIndex  = 999;
      if(do_embed)
        ct.style.position = "relative";
      else
      {
        ct.style.position = "absolute";
        // Many thanks to Peter-Paul Koch (www.quirksmode.org) for the find-pos-X/find-pos-Y code.
        var initX = 0, ct_ = ct;
        if(ct_.offsetParent)
        {
          while(ct_.offsetParent)
          {
            initX += ct_.offsetLeft;
            ct_ = ct_.offsetParent;
          }
        }
        else if(ct_.x)
          initX += ct_.x;
        var initY = 0; ct_ = ct;
        if(ct_.offsetParent)
        {
          while(ct_.offsetParent)
          {
            initY += ct_.offsetTop;
            ct_ = ct_.offsetParent;
          }
        }
        else if(ct_.y)
          initY += ct_.y;
        ct.style.top = initY + "px", ct.style.left = initX +"px";
      }
      kb.style.position = "relative";
      kb.style.top      = "0px", kb.style.left = "0px";
    }
    kb.style.border = "1px solid " + bc;
    var kb_main = exists ? kb.childNodes[0] : document.createElement("DIV"), ks = kb_main.style;
    if(!exists)
    {
      kb.appendChild(kb_main);
      ks.position = "relative";
      ks.width    = "1px";
      ks.cursor   = "default";
    }
    // Disable content selection:
    this._setup_event(kb_main, "selectstart", function(event) { return false; });
    this._setup_event(kb_main, "mousedown",   function(event) { if(event.preventDefault) event.preventDefault(); return false; });
    ks.fontFamily = ff, ks.backgroundColor = bg;
    if(!exists || changed)
    {
      ks.width  = this._create_numpad(container_id, kb_main);
      ks.height = (this._findY(this.LastKey) + this._findH(this.LastKey) + 1) + "px";
    }
    return this;
  },
  _create_numpad: function(container_id, parent)
  {
    var c = "center", n = "normal";
    var fs = this.fontsize, kc = this.keycolor, bc = this.bordercolor;
    var mag = parseFloat(fs) / 14.0, cell = Math.floor(25.0 * mag);
    var cp = String(cell) + "px", lh = String(Math.floor(cell - 2.0)) + "px";
    var edge = "1px";
    var kb_pad_7 = this._setup_key(parent, "___pad_7", "1px", edge, cp, cp, bc, kc, lh, fs);
    kb_pad_7.innerHTML = "7";
    var edge_1 = String(this._findX(kb_pad_7) + this._findW(kb_pad_7) + 1) + "px";
    var kb_pad_8 = this._setup_key(parent, "___pad_8", "1px", edge_1, cp, cp, bc, kc, lh, fs);
    kb_pad_8.innerHTML = "8";
    var edge_2 = String(this._findX(kb_pad_8) + this._findW(kb_pad_8) + 1) + "px";
    var kb_pad_9 = this._setup_key(parent, "___pad_9", "1px", edge_2, cp, cp, bc, kc, lh, fs);
    kb_pad_9.innerHTML = "9";
    var prevH = this._findH(kb_pad_9), edge_Y = (this._findY(kb_pad_9) + prevH + 1) + "px";
    edge_Y = (this._findY(kb_pad_7) + prevH + 1) + "px";
    var kb_pad_4 = this._setup_key(parent, "___pad_4", edge_Y, edge, cp, cp, bc, kc, lh, fs);
    kb_pad_4.innerHTML = "4";
    var kb_pad_5 = this._setup_key(parent, "___pad_5", edge_Y, edge_1, cp, cp, bc, kc, lh, fs);
    kb_pad_5.innerHTML = "5";
    var kb_pad_6 = this._setup_key(parent, "___pad_6", edge_Y, edge_2, cp, cp, bc, kc, lh, fs);
    kb_pad_6.innerHTML = "6";
    edge_Y = (this._findY(kb_pad_4) + prevH + 1) + "px";
    var kb_pad_1 = this._setup_key(parent, "___pad_1", edge_Y, edge, cp, cp, bc, kc, lh, fs);
    kb_pad_1.innerHTML = "1";
    var kb_pad_2 = this._setup_key(parent, "___pad_2", edge_Y, edge_1, cp, cp, bc, kc, lh, fs);
    kb_pad_2.innerHTML = "2";
    var kb_pad_3 = this._setup_key(parent, "___pad_3", edge_Y, edge_2, cp, cp, bc, kc, lh, fs);
    kb_pad_3.innerHTML = "3";
    edge_Y = (this._findY(kb_pad_1) + prevH + 1) + "px";
    var kb_pad_0 = this._setup_key(parent, "___pad_0", edge_Y, edge, cp, cp, bc, kc, lh, fs);
    kb_pad_0.innerHTML = "0";
    var kb_pad_enter = this._setup_key(parent, "___pad_period", edge_Y, edge_1, String(2 * cell + 1) + "px", cp, bc, kc, lh, parseFloat(fs) * 0.9, n);
    kb_pad_enter.innerHTML = "Enter";
    this.LastKey = kb_pad_enter;
    return String(this._findX(kb_pad_9) + this._findW(kb_pad_9) + 1) + "px";
  },
  _generic_callback_proc: function(event)
  {
    var e = event || window.event;
    var in_el = e.srcElement || e.target;
    var container_id = in_el.id.substring(0, in_el.id.indexOf("___"));
    var vpad = VATMpad.prototype.kbArray[container_id];
    if(vpad.sc) vpad._start_flash(in_el);
    if(vpad._Callback) vpad._Callback(in_el.innerHTML, vpad.Cntr.id);
  },
  SetParameters: function()
  {
    var l = arguments.length;
    if(!l || (l % 2 != 0)) return false;
    var p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10;
    while(--l > 0)
    {
      var value = arguments[l];
      switch(arguments[l - 1])
      {
        case "callback":
          p0 = ((typeof(value) == "function") && ((value.length == 1) || (value.length == 2))) ? value : this._Callback;
          break;
        case "font-name":  p1 = value; break;
        case "font-size":  p2 = value; break;
        case "font-color": p3 = value; break;
        case "base-color": p4 = value; break;
        case "key-color":  p5 = value; break;
        case "border-color": p6 = value; break;
        case "show-click":   p7 = value; break;
        case "click-font-color":   p8  = value; break;
        case "click-key-color":    p9 = value; break;
        case "click-border-color": p10 = value; break;
        default: break;
      }
      l -= 1;
    }
    this._construct(this.Cntr.id, p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10);
    return true;
  },
  Show: function(value)
  {
    var ct = this.Cntr.style;
    ct.display = ((value == undefined) || (value == true)) ? "block" : ((value == false) ? "none" : ct.display);
  }
};
打包文件下载

> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
    这篇文章主要介绍了利用ASP.NET和MVC+Bootstrap搭建个人博客之praise.js点赞特效插件二的相关资料,需要的朋友可以参考下在上篇文章给大家介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一).接下来给大家介绍如果做个点赞插件,一起通过本文学习吧! 1. 为啥要做这个点赞插件?    praise.js是一款小 ...
  • 探讨Ajax中有关readyState状态值和status状态码)的问题
    这篇文章主要介绍了探讨Ajax中有关readyState状态值和status状态码的问题的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下先看下面一段代码,然后给大家详细介绍,Ajax中有关readyState(状态值)和status(状态码)的问题,具体内容如下所示: var getXmlHttpRequest = function () { t ...
  • 简单谈谈GET和POST有什么区别
    本文给大家总结了下get与post的具体区别,以及网上的那么多答案为什么都是错误的,非常的实用,这里推荐给大家如果有人问你,GET和POST,有什么区别?你会如何回答? 真实案例      前几天有人问我这个问题.我说GET是用于获取数据的,POST,一般用于将数据发给服务器之用.     这个答案好像并不是他想要的.于是他继续追问有没有别的区别?我说这就是 ...
  • JavaScript中的正则表达式(推荐)
    正则表达式通常用于在文本中查找匹配的字符串,js正则表达式在程序开发中应用非常广泛,本文给大家介绍JavaScript 中的正则表达式推荐,感兴趣的朋友一起学习吧正则表达式的大致匹配过程是:依次拿出表达式和文本中的字符比较,如果每一个字符都能匹配,则匹配成功:一旦有匹配不成功的字符则匹配失败. 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词 ...
  • js选择器全面解析
    下面小编就为大家带来一篇js选择器全面解析.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧原生JS选择器有getElementById.getElementsByName.getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四个选择器的用法. 1.getElemen ...
  • 关于图片存储格式的整理(JPEG格式介绍)
    这篇文章主要介绍了关于图片存储格式的整理JPEG,需要的朋友可以参考下JPG jpg全名是JPEG .JPEG 图片以 24 位颜色存储单个光栅图像.JPEG 是与平台无关的格式,支持最高级别的压缩,不过,这种压缩是有损耗的.渐近式 JPEG 文件支持交错. jpg功能 可以提高或降低 JPEG文件压缩的级别.但是,文件大小是以牺牲图像质量为代价的.压缩比率 ...
猜你喜欢