Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Integer控件制作(ChromeOnly)

  在WebComponents中引入了Shadow DOM和Custum Tags的支持,联合使用他俩就可以开发一些小控件。由于我的网站后台程序只做了Chrome兼容,所以这些ChromeOnly的特性偶尔也是可以使用的。但要想用于一般项目中也许还需要很长一段时间。
  其实关于Shadow DOM和Custum Tags都在之前的文章中介绍过,现在只是用这些特性来实现点真正有用的东西。所谓Integer控件就是值只允许是整数的控件。我们要做的主要是屏蔽一些操作带来的非法输入。但要注意整数是允许为负的,所以还要考虑负数的输入。下面是演示代码: <base href="http://www.web-tinker.com/files/" />
<script src="widget-integer.js"></script>
<style>
widget-integer {display:inline-block;width:60px;}
</style>
<widget-integer value="123"></widget-integer>
  其中widget-integer.js在这里 //widget-integer.js
var HTMLWidgetInteger=document.registerElement("widget-integer",{
  prototype:{
    createdCallback:function(){
      var root=this.webkitCreateShadowRoot();
      var input=document.createElement("input");
      root.appendChild(input);
      //属性接口
      Object.defineProperty(this,"value",{
        get:function(){return input.value;},
        set:function(e){input.value=e|0;}
      });
      this.value=this.getAttribute("value");
      //限制键盘输入
      input.addEventListener("keydown",function(e){
        var c=e.keyCode;
        if(
          e.ctrlKey||(
            c>=96&&c<=105||c>=33&&c<=57||
            c>=8&&c<=27||c==144
          )||c==189&&input.selectionStart==0&&
          input.value[input.selectionEnd]!="-"
        )return;
        e.preventDefault();
      });
      //限制剪切板数据
      input.addEventListener("paste",function(e){
        var data=e.clipboardData.items;
        if(data.length)data[0].getAsString(function(mid){
          var v=input.value,mid=mid.trim();
          var left=v.substr(0,input.selectionStart),
              right=v.substr(input.selectionEnd);
          s=left+mid+right;
          if(isNaN(s))return;
          input.value=s|0;
          input.selectionStart=input.selectionEnd=(left+mid).length;
        });
        e.preventDefault();
        return false;
      });
      //直接修改
      input.addEventListener("change",function(){
        input.value=input.value|0;
      });
      //滚轮修改
      input.addEventListener("wheel",function(e){
        input.value=+input.value+(e.shiftKey?10:1)*e.wheelDelta/120|0;
      });
      //样式
      var style=document.createElement("style");
      style.textContent=(function(){/*
        input {
          box-sizing:border-box;width:100%;
          margin:0px;border:1px solid #CCC;
          height:24px;
          padding:3px;font:14px/16px Consolas;outline:none;
          text-align:right;
        }
      */}).toString().replace(/^.+?\/\*|\*\/\}\s*$/g,"");
      root.appendChild(style);
    },__proto__:HTMLElement.prototype
  }
});
  这个控件是现在临时写出来的,可能很多地方都不太完善吧。如果有需要的话以后再慢慢完善,现在正好需要用到这玩意儿,所以就先做成这样了。
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^