為了讓元素能夠隨父元素的寬高去自動調整, 當我們設定一個元素的寬度或高度時, 很多時便會以比例%去做設定，可是很多時候除了直接設定的寬高外，我們還需要設定一些 padding 或 border 以令內容看起來更美觀，可是令人煩惱的是 padding 和 border 並不包括在寬高的計算內, 以致在 fluid 模式下很容易走位，有時我會用負值的 margin 去解決這問題，今天則介紹另一 CSS 的設定，可輕鬆解決這個問題，它就是 box-sizing

box-sizing 有兩個值, 分別是:

1. content-box：只計算內容 (此為預設值)
2. border-box：內容 + padding + border

其實還有 padding-box 的, 可是這個值只有 firefox 才能支援, 相信也很少有人用, 總不能設計出一個網站只能供 firefox 正常瀏覽吧!
聰明的你應該一看就知道了, border-box 正是我們想要的東西, 將 box-sizing 設定成 border-box, 那麼不論你的 padding 和 border 是多少, 它都會被計算在寬高的總數中, 以你設定的寬高減去 padding 和 border, 便是內容的可容納寬高, 不用再擔心走位的問題了。

以往我們驗証 email 是否正確, 通常都是用 preg_match, 可是今天卻無意中發現, 原來 php5 早已內置 email validation 的功能, 那就是 filter_var

filter_var($email, FILTER_VALIDATE_EMAIL)

可是, 可能大家平日沒有留意, 其實一般通用的 email 驗証都沒有處理好 domain 的, 例如 xxx@xxx.com1, 即使用 filter_var 也是可以順利通過的, 但事實上那樣的域名是並不存在的, 所以在驗証時最好還要加多一些限制, 我的方法如下

function verifyEmail($email) {
	if(filter_var($email, FILTER_VALIDATE_EMAIL)) {
		return preg_match('/^([a-z]{2,4})$/', end(explode('.',$email)));
	}
	return false;
}

注意: 雖然我在驗証中只允許域名最後兩字是 2-4 個字母, 但其實現在是存在一些特別的域名是超過4個字母的, 例如 .travel, .museum, 所以使用上要視符網站需求去設定

filter_var 還有很多其他驗証功能, 例如 FILTER_VALIDATE_URL, FILTER_VALIDATE_IP 等, 有需要時可到 php.net 詳閱

在 MySQL 我們要 join 兩個資料表時必須用一個 field 去做連結, 而一般來說這個 field 都是數字型態, 因此很少會出現問題。

可是今天我卻出現一個情況是需要用到一個 varchar 型態的 field 去做連結的, 照正式的方式寫後, 結果出現以下的錯誤訊息: "Illegal mix of collations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT) for operation", 原來在 MySQL 是不可以用 varchar 直接做這樣的比對的, 在 google 搜尋一翻後終於找到如下答案:

SELECT a.* FROM a INNER JOIN b ON CAST(a.field AS CHAR) = CAST(b.field AS CHAR)

if('draggable' in document.createElement('span')) {
  alert("Drag support detected");
}

我們編寫網頁表單時，有時會需要設計一些動態數目的輸入項，在這些情況中，我們通常會使用 jQuery/js 來動態增加輸入框到表單中。可是，今天我卻遇到一個問題，就是用 JS 加入的輸入框的值並沒有送到伺服器端，起初我以為是 JS 的設定錯了，但最終找到原因原來是和 html 的結構有關

以下是 html

<table id="table">
	<form>
	<thead>
		<tr>
			<th>Title</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="text" name="dynamic[]"></td>
		</tr>
	<tbody>
	<tfoot>
		<tr>
			<td><input type="button" id="addmore"></td>
		</tr>
	</tfoot>
	</form>
</table>

JS:

$(document).ready(function() {
	$("#addmore").click(function() { $("tbody",$("#table")).append(''); });
});

令新加的輸入框無法傳送出去的原因是 table 和 form 的次序, 上例中我是把 form 放在 table 的入面, 這樣的情況便會導致提交時表單無法取得新加的輸入框的值, 因為從正確 html 層面上來說, table 中間的內容應該是寫在 td 或 th 中的, 而上例則不規則地在 table 和 td 中間插入 form, 所以便出了錯誤, 解決方法很簡單, 只需將 form 和 table 的次序調轉, 用 form 包住 table 便可以了:

	

		

			

				

					Title