[轉載] Javascript Char Codes (Key Codes)

轉載自：Javascript Char Codes (Key Codes)

Key	Code
backspace	8
tab	9
enter	13
shift	16
ctrl	17
alt	18
pause/break	19
caps lock	20
escape	27
page up	33
page down	34
end	35
home	36
left arrow	37
up arrow	38
right arrow	39
down arrow	40
insert	45
delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68

Key	Code
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
left window key	91
right window key	92
select key	93
numpad 0	96
numpad 1	97
numpad 2	98
numpad 3	99
numpad 4	100
numpad 5	101
numpad 6	102
numpad 7	103

Key	Code
numpad 8	104
numpad 9	105
multiply	106
add	107
subtract	109
decimal point	110
divide	111
f1	112
f2	113
f3	114
f4	115
f5	116
f6	117
f7	118
f8	119
f9	120
f10	121
f11	122
f12	123
num lock	144
scroll lock	145
semi-colon	186
equal sign	187
comma	188
dash	189
period	190
forward slash	191
grave accent	192
open bracket	219
back slash	220
close braket	221
single quote	222

[AngularJS] 製作 jQuery UI Sortable directive

Html

<div jq-sortable="selectedList">
    <div ng-repeat="item in selectedList">
        <img ng-src="{{item.src}}" />
    </div>
</div>

JavaScript

app.directive('jqSortable', ['$parse', function($parse) {
    return function(scope, element, attrs) {
        /*解析並取得表達式*/
        var expr = $parse(attrs['jqSortable']);
        var $oldChildren;

        element.sortable({
            opacity: 0.7,
            scroll: false,
            tolerance: "pointer",
            start: function() {
                /*紀錄移動前的 children 順序*/
                $oldChildren = element.children('[ng-repeat]');
            },
            update: function(){
                var newList = [];
                var oldList = expr(scope);
                var $children = element.children('[ng-repeat]');

                /*產生新順序的陣列*/
                $oldChildren.each(function(i){
                    var index = $children.index(this);
                    if(index == -1){ return; }

                    newList[index] = oldList[i];
                });

                /*將新順序的陣列寫回 scope 變數*/
                expr.assign(scope, newList);

                /*通知 scope 有異動發生*/
                scope.$digest();
            }
        });

        /*在 destroy 時解除 Sortable*/
        scope.$on('$destroy', function(){
            element.sortable('destroy');
        });
    };
}]);

[AngularJS] 製作 Mouse Drag Event directive

Html

<div ng-style="{'top': itemTop, 'left': itemLeft}"
    my-mousedrag="itemTop = itemTop - $deltaY; itemLeft = itemLeft - $deltaX"
></div>

JavaScript

app.directive('myMousedrag', function() {
    return function(scope, element, attrs) {
        var prevEvent;
        element.mousedown(function(event){
            prevEvent = event;

        }).mouseup(function(event){
            prevEvent = null;

        }).mousemove(function(event){
            if(!prevEvent){ return; }

            /*將 element 拖移事件傳遞到 scope 上*/
            scope.$eval(attrs['myMousedrag'], {
                $event: event,
                $deltaX: event.clientX - prevEvent.clientX,
                $deltaY: event.clientY - prevEvent.clientY
            });

            /*通知 scope 有異動發生*/
            scope.$digest();

            prevEvent = event;
        });

        /*在 destroy 時清除事件註冊*/
        scope.$on('$destroy', function(){
            element.off('mousedown mouseup mousemove');
        });
    };
});

[AngularJS] 製作 jQuery MouseWheel directive

相依套件：jquery-mousewheel

Html

<div jq-mousewheel="changeSize($event, $delta, $deltaX, $deltaY)"></div>

JavaScript

app.directive('jqMousewheel', function(){
    return function(scope, element, attrs) {

        /*將 element 滾輪事件傳遞到 scope 上*/
        element.on('mousewheel', function (event) {
            scope.$eval(attrs['jqMousewheel'], {
                $event: event,
                $delta: event.delta,
                $deltaX: event.deltaX,
                $deltaY: event.deltaY
            });

            /*通知 scope 有異動發生*/
            scope.$digest();
        });

        /*在 destroy 時清除事件註冊*/
        scope.$on('$destroy', function(){
            element.off('mousewheel');
        });
    };
});

[AngularJS] 製作 jQuery scrollTop scrollLeft directive

Html

<div jq-scroll-top="viewerScrollTop" 
      jq-scroll-left="viewerScrollLeft"
></div>

JavaScript

app.directive('jqScrollTop', ['$parse', function($parse){
    return function(scope, element, attrs) {
        /*解析並取得表達式*/
        var expr = $parse(attrs['jqScrollTop']);

        /*監聽變數異動，並更新到 element 上*/
        scope.$watch(attrs['jqScrollTop'], function(value) {
            element.scrollTop(value);
        });

        /*當 element 捲動時更新到變數上*/
        element.on('scroll', function() {
            expr.assign(scope, element.scrollTop());
        });

        /*在 destroy 時清除事件註冊*/
        scope.$on('$destroy', function(){
            element.off('scroll');
        });
    };
}]);

app.directive('jqScrollLeft', ['$parse', function($parse){
    return function(scope, element, attrs) {
        /*解析並取得表達式*/
        var expr = $parse(attrs['jqScrollLeft']);

        /*監聽變數異動，並更新到 element 上*/
        scope.$watch(attrs['jqScrollLeft'], function(value) {
            element.scrollLeft(value);
        });

        /*當 element 捲動時更新到變數上*/
        element.on('scroll', function() {
            expr.assign(scope, element.scrollLeft());
        });

        /*在 destroy 時清除事件註冊*/
        scope.$on('$destroy', function(){
            element.off('scroll');
        });
    };
}]);

利用 HTTP Status Codes 傳遞 Ajax 成功失敗的狀態

一般處理 Ajax 回應時會傳送的資訊種類有：資料、成功訊息、錯誤訊息、失敗訊息以及處理狀態，傳遞的資訊種類並不一致，再加上除了資料之外，通常還希望能傳遞處理狀態，這種情況大部分會選擇是以 JSON 的方式傳遞這兩個訊息，以下是常見的幾種格式：

{ code: 1, msg: "OK" }
{ success: true, result: "data", errorMsg: "" }
{ status: 'success', result: [], errorMsg: "" }
//...

但以執行狀態跟操作行為作一個歸納，可以區分以下幾種回傳結果：

資料操作	HTTP Method	成功	錯誤/失敗
檢視(Read)	GET	資料	錯誤/失敗訊息
新增(Create) 修改(Update) 刪除(Delete)	POST	成功訊息	錯誤/失敗訊息

從上面的歸納可以看出規律性，接著只要有方法可以傳送處理的狀態，以及能夠區分資料的種類，其實就單純很多，而 HTTP Status Codes 就是用來傳遞 HTTP 的處理狀態，如果利用這個方式來傳遞自訂的處理狀態，這樣 HTTP Content 就可以很單純傳遞資料，讓資料格式不受限於 JSON，還可以使用其他格式(text, xml, html)，而且 XMLHttpRequest 本身就有處理 HTTP Status Codes 的能力，而 jQuery.ajax 也有提供 error status 的處理，所以可以利用這個來定義狀態的處理，在 HTTP Status Codes 有幾個已經定義狀態，很適合用來回傳處理狀態的資訊：

400	Bad Request	錯誤的請求	適用在表單內容的錯誤，如必填欄位未填、Email 格式錯誤
403	Forbidden	沒有權限，被禁止的	適用在沒有登入或權限不足
500	Internal Server Error	內部服務器錯誤	適用在程式的錯誤

jQuery 接收資訊的範例

$.ajax({
    type: "POST",
    url: document.location,
    success: function (data, textStatus, jqXHR) {
        alert(data);
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
    }
});

PHP 傳遞錯誤訊息的範例

if (php_sapi_name() == 'cgi'){
    header("Status: 400 Bad Request");
}else{
    header("HTTP/1.0 400 Bad Request");
}
exit("儲存失敗!!");

C# MVC 傳遞錯誤訊息的範例

Response.TrySkipIisCustomErrors = true;
Response.StatusCode = 400;
return Content("儲存失敗!!");

[jQuery] $.log 與 $.fn.dump

記錄一下，偷懶的 console.log

if ($ && $.fn) {
    $.log = (window['console'] && typeof(console.log)=='function') ?
        function () { console.log.apply(console, arguments); } :
        $.noop;

    $.fn.dump = function (tag) {
        var args = Array.prototype.slice.call(arguments);
        args.push(this);

        $.log.apply($, args);
        return this;
    }
}


// use
$.log('ok');

$('img').dump();

$('div').dump('my tag');

[jQuery] 製作 $.fn.delayAll

jQuery 有提供 delay 這個方法，可惜只能用在動畫操作上，想要做到下面的事情就只能用 setTimeout 了。

// not working
$('div').css('color','red').delay(200).css('color','blue');


// use setTimeout
$('div').css('color','red');

setTimeout(function(){
    $('div').css('color','blue');
}, 200);

稍微研究了一下，發現 jQuery 本身有製作 queue 的功能，這個用來存放 delay 後要執行動作的紀錄器，最後只要對 jQuery Object 作一個代理器的包裝，就可以達到想要的目的了。

var queueName = 'delayAll';

/*定義 jQuery Delay 代理類別*/
function jQueryDelay(jqObject, duration){
    /*將缺少的成員屬性補上*/
    for(var member in jqObject){
        if(!$.isFunction(jqObject[member]) || !this[member]){
            this[member] = jqObject[member];
        }
    }

    /*新增 delay 時間並啟動 queue*/
    jqObject
        .delay(duration, queueName)
        .dequeue(queueName);

    /*紀錄 jQuery 物件*/
    this._jqObject = jqObject;
};


/*為所有的 jQuery 方法製作 proxy*/
for(var member in $.fn){
    if(!$.isFunction($.fn[member])){ continue; }

    jQueryDelay.prototype[member] = function(){
        var jqObject = this._jqObject;
        var args = Array.prototype.slice.call(arguments);
        var mothed = arguments.callee.methodName;

        /*將需要執行動作加入 queue*/
        jqObject.queue(queueName, function(next) {
            jqObject[mothed].apply(jqObject, args);
            next();
        });

        return this;
    };

    /*紀錄方法名稱，在 proxy 時會需要參考到*/
    jQueryDelay.prototype[member].methodName = member;
}


/*允許多次串接的可能*/
jQueryDelay.prototype.delayAll = function(duration){
    this._jqObject.delay(duration, queueName);
    return this;
};


/*用 jQueryDelay 將原本的 jQuery Object 包裝起來*/
$.fn.delayAll = function(duration){
    return new jQueryDelay(this ,duration);
};

使用範例：

$('div').css('color','#f00')
    .delayAll(2000).css('color','#0f0')
    .delayAll(2000).css('color','#00f');

檔案下載：jquery.delayAll.js

[jQuery] 等待多個 Ajax 請求完成

最近在找等待多個 Ajax 完成的方法，找到 jQuery.when函数分析這篇文章中有處理多個 Ajax 的方法，但對於數量不固定的狀況，jQuery.when 輸入參數的方式實在有點討厭，必須要指定 Ajax 的數量，還好想起有 apply 這個方法可以用，可以將 array 轉換成呼叫 function 的參數，這樣不管有多少數量，都可以很輕鬆的帶入到 jQuery.when 中。

/*將多個 Ajax 加到 array 中*/
var ajaxRequest=[];
for (var i=0; i<10; i++){
    ajaxRequest.push(
        $.ajax({
            data: {'a':i},
            success: function(data) {
                console.log(data);
            }
        })
    );
};

/*利用 apply 將 ajaxRequest 帶入 jQuery.when*/
var der=$.when.apply( $, ajaxRequest )

der.always(function() {
    console.log(arguments);
    alert('全部結束');
});        
der.done(function() {
    console.log(arguments);
    alert('全部成功');
});        

[jQuery] textarea 自動高度很簡單

上網找了一些文章來看後，自己又再改了一改，發現很簡單就可以達到自動高度的功能，真是給他快樂的說。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>文字區塊自動高度</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript"> 
    jQuery(function($) {
        $("textarea.AutoHeight").css("overflow","hidden").bind("keydown keyup", function(){
            $(this).height('0px').height($(this).prop("scrollHeight")+"px");
        }).keydown();
    });
    </script> 
</head>
<body>
    <textarea class="AutoHeight"></textarea>
    <textarea class="AutoHeight"></textarea>
    <textarea class="AutoHeight"></textarea>
</body>
</html>

[HTML] 規劃延生屬性

之前在玩 Firefox 的外掛時，在 XUL 的定義中學到其他屬性設定，當中有些定義還蠻常用到的
如：empty, emptytext, max, min...等

這裡我只是要說明一個簡化開發的 solution，並沒有完整的應用規劃，為了瞭解這個 solution 可以先看看一個簡單的範例 html_extension.zip。

其實最近看到 HTML5 已經將很多常見的介面應用加入定義中，但還是可以將系統架構中常用的功能做成延伸屬性，在 HTML5 普及之前這是一個很好的 solution。


在之前的專案中，我做了一下的規劃：

element [延伸屬性]{所有元素共用}

removeDelay="sec" {設定幾秒鐘後自動[移除]此元素}
pulsate="sec" {設定幾秒鐘後自動結束元素[閃爍]}

input,textarea [延伸屬性]

emptyText="為空預設提示" {設定當輸入匡為空時的文字提示}

form > tr [延伸樣式]

class="NotNull" {檢查區塊內的元素是否有選項值}

form > input [延伸屬性]

format="" {表單送出前的格式檢查,但不會檢查是否為空}

• 'tel':電話
• 'mobile':行動電話
• 'email':電子信箱
• 'url':網路連結
  

jtype="" {資料輸入時的輔助}
(基本格式輸入)

• 'uint':無符號整數
• 'int':整數
• 'float':浮點數
• 'id':帳號格式
• 'alnum':保留字母和数字及底線
  

(輔助日期輸入)

• 'date':選擇日期
• 'start_date':選擇起始日期
• 'end_date':選擇結束日期
  

(輔助時間輸入)

• 'time':選擇時間
• 'start_time':選擇起始時間
• 'end_time':選擇結束時間
  

在下面的 HTML 中可以看到程式碼都便得很簡單

<!--動態效果-->
<div pulsate="4">4秒閃爍</div>
<div removeDelay="10">10秒後消失</div>
<div pulsate="5" removeDelay="8">5秒閃爍&8秒後消失</div>


<!--表單-->
<form class="FormWidget" method="post" action="">
<table class="FormList" border="0">
  <caption>輸入限制</caption>

  <tr class="NotNull">
    <th><label for="data_1">無符號整數 :</label></th>
    <td><input type="text" jtype="uint" value="" class="Int" id="data_1" name="data_1"/></td>
  </tr>

  <tr class="NotNull">
    <th><label for="data_2">整數 :</label></th>
    <td><input type="text" jtype="int" value="" class="Int" id="data_2" name="data_2"/></td>
  </tr>

  <tr class="NotNull">
    <th><label for="data_3">浮點數 :</label></th>
    <td><input type="text" jtype="float" value="" class="Int" id="data_3" name="data_3"/></td>
  </tr>
   
  <tr>
    <th><label for="data_4">帳號格式 :</label></th>
    <td><input type="text" jtype="id" value="" class="Text" id="data_4" name="data_4" emptyText="請輸入帳號"/></td>
  </tr>

  <tr class="NotNull">
    <th><label for="data_5">英數及底線 :</label></th>
    <td><input type="text" jtype="" value="" class="Text" id="data_5" name="data_5"/></td>
  </tr>
</table>


<table class="FormList" border="0">
  <caption>時間 & 日期</caption>

  <tr>
    <th><label for="data_6">日期 :</label></th>
    <td><input type="text" jtype="date" value="" id="data_6" name="data_6"/></td>
  </tr>

  <tr>
    <th><label>日期區間 :</label></th>
    <td>
      <div class="OptionBar">
        <label>起始<input type="text" jtype="start_date" value="" class="Text" name="start_date"/></label>
        -
        <label>結束<input type="text" jtype="end_date" value="" class="Text" name="end_date"/></label>
      </div>
    </td>
  </tr>
    
  <tr>
    <th><label for="data_7">時間 :</label></th>
    <td><input type="text" jtype="time" value="" id="data_7" name="data_7"/></td>
  </tr>
    
  <tr>
    <th><label>時間區間 :</label></th>
    <td>
      <div class="OptionBar">
        <label>起始<input type="text" jtype="start_time" value="" name="start_time"/></label>
        -
        <label>結束<input type="text" jtype="end_time" value="sdsfsdf" name="end_time"/></label>
      </div>
    </td>
  </tr>
</table>


<table class="FormList" border="0">
  <caption>格式檢查</caption>

  <tr>
    <th><label for="data_8">電話格式 :</label></th>
    <td><input type="text" format="tel" value="" class="Text" id="data_8" name="data_8"/></td>
  </tr>
        
  <tr class="NotNull">
    <th><label for="data_9">行動電話格式 :</label></th>
    <td><input type="text" format="mobile" value="0912345678" class="Text" id="data_9" name="data_9"/></td>
  </tr>
            
  <tr class="NotNull">
    <th><label for="data_10">E-mail 格式 :</label></th>
    <td><input type="text" format="email" value="" class="Text" id="data_10" name="data_10"/></td>
  </tr>
                                
  <tr>
    <th><label for="data_11">連結格式 :</label></th>
    <td><input type="text" format="url" value="" class="Text" id="data_11" name="data_11"/></td>
  </tr>
</table>

<div class="Buttons">
  <input type="submit" class="Button" value="儲存"/>
</div>
</form>