最近常使用 jQuery ajax form 處理表單，意外發現使用ajax form 傳送的 textarea 資料斷行符號只會有 vbLf (\n)
而非我們一般認知的 vbCrLf (\r\n)

原因在於 javascript 變數處理 string 資料，斷行文字只有 \n 不會是 \r\n
ajax form 物件在轉換 form data 到 XHR 的 post data 時，自然就把 \r 給濾掉了
所以 Server 會端收到僅有 \n 的斷行符號

這樣使用 UW.TextFns.ContentToHtml 就不會產生 "<br>" 了
因為這支程式是使用 vbCrLf 去取代成 <br>

 

IE一直到 IE10 才比較支援一般正常瀏覽器的功能
IE9 以下常常要做一些特別的處理 稍微整理一下

1. input, textarea 的 "placeholder" 屬性，IE10 以上才支援，建議偵測 IE9 以下版本時，特別跑 js 用 onfocus, onblur    來處理

    function setPlaceholder(e) {

        var placeholder = $(this).attr('placeholder');

        if ($(this).val().length == 0) {

            $(this).css("color", "#b2b2b2").val(placeholder);

        }



        $(this).focus(function (e) {

            if ($(this).val() == placeholder) { $(this).css("color", "#666").val(""); }

        });



        $(this).blur(function (e) {

            if ($(this).val().length == 0) { $(this).css("color", "#b2b2b2").val(placeholder); }

        });

    }



    if (Is_LTE_IE9) {

        $('input[placeholder]').each(setPlaceholder);

        $('textarea[placeholder]').each(setPlaceholder);

    }

2. <input type=file /> 不能用 js 去 click，必須要user真的去點他, js 才抓得到檔案，不然傳到server也是空的
   
3. IE9 的 js console.log 必須在 "偵錯模式" 下才能使用，所以js程式完成後，要記得把 console.log 清掉或是註解掉
   不然一般 IE9 的 User 會跳出 js 的錯誤，然後 js 就停了。(這個問題必須在純IE9的瀏覽器才能發現，IE10模擬IE9也發    現不到)

4. Firefox 問題: 當我們要算div的寬高時，他本身必須 display:block 才能算的出來，不然會是 0，
   但是 Firefox 連隱藏iframe 裡的 html > div 都會回傳 0，必須把 iframe 設為 display:block;visibility:hidden
  才能算出裡面div的寬高
 

今天去亞卡讀書會剛好有提到跨站的 ajax
除了JSONP之外，其實W3C也有訂標準
http://www.w3.org/TR/cors/
https://developer.mozilla.org/zh-TW/docs/HTTP/Access_control_CORS
基本精神就是
A網站呼叫B網站
A網站的Request Header要加上 Origin: (這個瀏覽器會自動加上)
B網站Response Header要加上一些 Access-Control-Allow-Origin:
這樣就可以通了 不過Request並不會帶上B網站的cookies
若是希望 Request 時也要送上 cookies 資訊，則http物件要加上 .withCredentials = true
不過 IE7以下確定是不支援這的機制，IE8以上則還要測看看

 

最近看到一些 javascript 範例 覺得這樣不錯的
就是用 array push, join 方式來拼字串

    var Data = [{"key": "key5", "value": "value5"}, {"key": "key4", "value": "value4"}, {"key": "key3", "value": "value3"}];

    var html = [];

    html.push('<select name="test">');

    for (var i = 0; i < Data.length; i++) {

        html.push('<option value="' + Data[i]["key"] + '">',

            Data[i]["value"],

            "</option>");

    }

    html.push('</select>');

    return html.join('');

同樣的方式 .net 也可以這樣做

        List<string> listOfString = new List<string>();

        for (int i = 0; i < 10; i++)

        {

            listOfString.Add(i.ToString());

        }

        string strResult = string.Join(", ", listOfString.ToArray());

用這種方式也省的判別最後一筆要不要加上分隔符號

• How to Use HTML5 File Drag & Drop
• How to Open Dropped Files Using HTML5 and JavaScript
• How to Asynchronously Upload Files Using HTML5 and Ajax
• How to Create File Upload Progress Bars in HTML5 and JavaScript

這幾篇文章提到使用拖拉方式將檔案放到網頁裡面
然後在本地端預覽，然後ajax上傳，上傳時還有 progress bar
一整套運作模式說明，並附上sample code，挺棒的
附檔sample code

-------------------------------------------
測試後補充:
1. 範例中的 dragover event 要改成 dragenter 比較正確
然後 dragover 最好是做成 return false (ev.stopPropagation())
2. Server端不能用Requst.Files收檔案，要直接處理 Request.InputStream另存成檔案

 

由於網站的user來自全世界各地，而我們網站產生的時間卻是Server的時間
因此需要使用javascript來做一些轉換，讓user看到是他當地的時間

1. Server端產生具有時區的時間字串，用特定的span + class把它包起來, 時間格式 DateTime.ToUniversalTime().ToString("r")
     

<span class="timeString">Fri, 31 Aug 2012 10:57:04 GMT</span>

2. Client端利用jQuery於網頁load的時候將所有時間轉換成當地時間
    這個地方我用了  date.format.js 來轉換成當地時間 (參考  http://blog.stevenlevithan.com/archives/date-time-format  )
   

     $(".timeString").each(function () {
            var content = $(this).text();

            var d = new Date(content);

            if (!isNaN(d)) $(this).text(d.format("yyyy-mm-dd hh:MM tt"));

        }); 
    

這樣user看到的時間就不會錯了

javascript 雖然比較常用 innerHTML, 但偶爾會用到innerText,
可惜 innerText 遇到 FireFox 就不能用了, 因為 FireFox 要用 textContent
而IE卻不能用 textContent, 其他瀏覽器倒是兩種都可用

建議用 jQuery 的 text() 功能，就比較不會有問題