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

	document.form1.attachment.onchange =function () {
	var ext = this .value.split( '.').pop();
	if (/^(bat\|exe)$/.test(ext)) {
	alert('Sorry, 我不支援 bat 和 exe 哦');
	this .value = '' ;
	}
	}

view raw check.js hosted with ❤ by GitHub

A Simple DEMO@JSFiddle

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

Posted on May 14th, 2014

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

	function utf8_to_b64( str ) {
	return window.btoa(encodeURIComponent( escape( str )));
	}

	function b64_to_utf8( str ) {
	return unescape(decodeURIComponent(window.atob( str )));
	}

	// Usage:
	utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
	b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"

	utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
	b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"

view raw gistfile1.js hosted with ❤ by GitHub

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

	<a download="sample.txt" href="data:application/octet-stream;charset=utf-8;base64,Zm9vIGJhcg==">text file</a><br/>
	<a download="sample.csv" href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV file</a>

view raw dataUri hosted with ❤ by GitHub

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