input输入框记录快捷键组合

2019独角兽企业重金招聘Python工程师标准>>>

快捷键保存,一个是用几个select让用户去选择ctrl+alt+字母数字 的组合,另一种是input输入框让用户直接按下记录下来,当然第二种更方便.

在一个node-webkit客户端用Angular.js来绑定一些事件,实现了这个功能.

代码如下:

<div class="uk-form-controls padding10">
        <label for="conf-hotkey-screenCapture-value">屏幕截图</label>
        <input type="text" id="conf-hotkey-screenCapture-value" ng-keydown="sethotKey($event)" ng-model="sysconf.hotkey.screenCapture.value">
</div>

//保存上次快捷键
var lastHotkey="";
//设置快捷键
$scope.sethotKey = function($event){
      var keyValue=[];
      if($event.ctrlKey) keyValue.push("Ctrl");
      if($event.altKey) keyValue.push("Alt");
      if($event.shiftKey) keyValue.push("Shift");
      var keyCodeMap={"48":"0","49":"1","50":"2","51":"3","52":"4","53":"5","54":"6","55":"7","56":"8","57":"9","65":"A","66":"B","67":"C","68":"D","69":"E","70":"F","71":"G","72":"H","73":"I","74":"J","75":"K","76":"L","77":"M","78":"N","79":"O","80":"P","81":"Q","82":"R","83":"S","84":"T","85":"U","86":"V","87":"W","88":"X","89":"Y","90":"Z"};
     if(keyCodeMap[$event.keyCode]){
       keyValue.push(keyCodeMap[$event.keyCode]);      
     }
     $event.target.value = keyValue.join("+");
     CURSOR_LOCATOR.setCursorPosition($event.target,"end");
     $event.preventDefault();
     if(keyValue.length>=2&&keyCodeMap[$event.keyCode]){
        $($event.target).removeClass("uk-form-danger").addClass("uk-form-success");
          global.EVENT.emit("globalShortcutReg","getMessage",true);
          lastHotkeyGetmessage=$event.target.value;
     }else{
        $($event.target).addClass("uk-form-danger").removeClass("uk-form-success");       
        return false;
     }
    };

/* CURSOR_LOCATOR
 * textarea或input 光标操作函数
 * getPosition(t) 获得位置信息
 * getCursorPosition(t) 光标位置
 * setCursorPosition(t, p) 设置光标位置
 * add(t,txt) 添加内容到光标处
 */
var CURSOR_LOCATOR = {  
  getPosition:function(t){
        var o = t.getBoundingClientRect();
        var w = t.offsetWidth;
        var h = t.offsetHeight;
        var s = t.style;
        return {top:o.top, left:o.left, width:w, height:h , style:s};
    },  
    getCursorPosition: function(t){
        if (document.selection) {
            t.focus();
            var ds = document.selection;
            var range = null;
            range = ds.createRange();
            var stored_range = range.duplicate();
            stored_range.moveToElementText(t);
            stored_range.setEndPoint("EndToEnd", range);
            t.selectionStart = stored_range.text.length - range.text.length;
            t.selectionEnd = t.selectionStart + range.text.length;
            return t.selectionStart;
        } else return t.selectionStart
    },  
    setCursorPosition:function(t, p){
        var n = p == 'end' ? t.value.length : p;
        if(document.selection){
            var range = t.createTextRange();
            range.moveEnd('character', -t.value.length);       
            range.moveEnd('character', n);
            range.moveStart('character', n);
            range.select();
        }else{
            t.setSelectionRange(n,n);
            t.focus();
        }
    },  
    add:function (t, txt,addPosition){
        var val = t.value;
        var wrap = wrap || '' ;
        if(document.selection){
            document.selection.createRange().text = txt;
        } else {
          if(typeof(addPosition)!="undefined"){
            var ubbLength = t.value.length;
            t.value = t.value.slice(0,addPosition) + txt + t.value.slice(addPosition, ubbLength);
          }else{
              var cp = t.selectionStart;
              var ubbLength = t.value.length;
              t.value = t.value.slice(0,t.selectionStart) + txt + t.value.slice(t.selectionStart, ubbLength);
              this.setCursorPosition(t, cp + txt.length);
          }
        };
    },  
    del:function(t, n){
        var p = this.getCursorPosition(t);
        var s = t.scrollTop;
        t.value = t.value.slice(0,p - n) + t.value.slice(p);
        this.setCursorPosition(t ,p - n);
    }
};

转载于:https://my.oschina.net/u/265765/blog/335939