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


Posted in Javascript onMay 02, 2007

/*
 * 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.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);
  }
};
打包文件下载

Javascript 相关文章推荐
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
JS Attribute属性操作详解
May 19 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
js继承实现方法详解
Dec 16 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
vue实现通讯录功能
Jul 14 Javascript
微信小程序按钮点击跳转页面详解
May 06 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
javascript英文日期(有时间)选择器
May 02 #Javascript
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 #Javascript
JavaScript 实现??打印?理
Apr 28 #Javascript
javascript实现的listview效果
Apr 28 #Javascript
Javascript模板技术
Apr 27 #Javascript
javascript函数库-集合框架
Apr 27 #Javascript
仿服务器端脚本方式的JS模板实现方法
Apr 27 #Javascript
You might like
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python正则捕获操作示例
2017/08/19 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
django框架两个使用模板实例
2019/12/11 Python
pytorch进行上采样的种类实例
2020/02/18 Python
在keras中实现查看其训练loss值
2020/06/16 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
初中生评语大全
2014/04/24 职场文书
2014年中秋寄语
2014/08/11 职场文书
教师求职简历自我评价
2015/03/10 职场文书
行政二审代理词
2015/05/25 职场文书
大学生军训感言
2015/08/01 职场文书
小学大队长竞选稿
2015/11/20 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Python加密与解密模块hashlib与hmac
2022/06/05 Python