Liullen dev daily

Showing all posts tagged #javascript:

透過輸入法組字事件 CompositionEvent 解決 iOS 上可能無法觸發 GoogleMap Autocomplete

Posted on September 13th, 2017

透過輸入法組字事件 CompositionEvent 解決 iOS 可能無法正確觸發 GoogleMap Autocomplete

  // hack: 讓 iOS 鍵盤拼完字會跳出 google map 的 autocomplete
      $(pacInput).on('compositionend', function() {
    $(this).trigger('blur').trigger('focus');
      });

jsfiddle demo: https://jsfiddle.net/25gj9m9x/

相關事件：

compositionstart : 輸入法組字開始
compositionend : 輸入法組字結束
compositionupdate: 輸入法修改字詞

[1] 參考 MDN: https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent

透過 js 檢查 input file 的檔案副檔名

Posted on May 30th, 2014

由於 html5 開始才支援 accept 屬性: audio/*, video/*, image/*

可以用於檢查 input file 的檔案格式,

ex:

REF: w3schools

但若要支援較舊的瀏覽器, 似乎只能夠過檢查副檔名來判斷

這邊透過 split('.') 再用 array 的 pop() 取出最後一個點後方的字串, 也就是副檔名,

若是以單存取得副檔名的功能來說, 這個方法還滿簡潔的.

當然若要直接用 RegExp.test() 來驗證整個檔名也完全可以, 我想效能應該不會差太多.., 所以這篇只是想記錄取副檔名的用法: split('.').pop() XDD

A Simple DEMO@JSFiddle

btoa(), atob() 支援中文的方法

Posted on May 14th, 2014

由於 btoa 只能以英文數字等非 unicode 組合作為輸入, 所以若要支援 unicode 字元(中文), 必須用替代方法, 先將內容 escape 再 encode,

DEMO: [jsfiddle](http://jsfiddle.net/zrj9ydgc/)

REF: [window.btoa(MDN)](https://developer.mozilla.org/en-US/docs/Web/API/window.btoa)

Data Uri Schema

Posted on May 12th, 2014

藉由瀏覽器的 data uri schema,

使用 data type: application/octet-stream 就可以用來下載由 javascript 產生的資料,

不經由瀏覽器, 且大部分瀏覽器皆支援, (IE8 有 32KB 的 data 限制)

配合 download 的 tag attribute 就能夠指定下載名稱 (only support: ff, chrome)

最明顯的缺點是效能, 無法 cache 且每次載入必須重新 decode 和 embed

REF: [Data_URI_scheme (Wikipedia)](http://en.wikipedia.org/wiki/Data_URI_scheme)