哇寶部落格 » big5 http://blog.wabow.com Wabow Information Inc. Blog Fri, 21 May 2010 15:11:05 +0000 en hourly 1 http://wordpress.org/?v=3.0 全型轉半型 http://blog.wabow.com/archives/1874 http://blog.wabow.com/archives/1874#comments Thu, 13 Aug 2009 04:08:11 +0000 suzy http://blog.wabow.com/?p=1874 今天想要分享的是 中文字 全型轉半型的 function!

之前的做法很土法鍊鋼, 就是笨笨地用取代(str_replace)的方式把所有全型字一一換成半型字, 但是客戶經常回報, 某些特定字會造成亂碼, 像是 '中央北路' and '郭郭' 等.... 造成了許多困擾.

因此上網搜尋了一下, 且找到了一個真正的解決方法.......

出處: [原创]PHP全角转半角算法和函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

function fullToHalf($str, $encode='Big5') {
	if ($encode != 'UTF8') {
		$str = mb_convert_encoding($str, 'UTF-8', $encode);
	}
	$ret='';
	for ($i=0; $i < strlen($str); $i++) {
 
		$s1 = $str[$i];
 
		// 判斷 $c 第八位是否為 1 (漢字）
		if( ($c=ord($s1)) & 0x80 ) { 
			$s2 = $str[++$i];
			$s3 = $str[++$i];
			$c = (($c & 0xF) << 12) | ((ord($s2) & 0x3F) << 6) | (ord($s3) & 0x3F);
 
			if ($c == 12288) {
				$ret .= ' ';
			} elseif ($c > 65280 && $c < 65375) {
				$c -= 65248;
				$ret .= chr($c);
			} else {
				$ret .= $s1 . $s2 . $s3;
			}
 
		} else {
			$ret .= $str[$i];
		}
	}
 
	return ($encode== 'UTF-8' ? $ret : mb_convert_encoding($ret, $encode, 'UTF-8'));
 
}

研究了一下寫法, 複習了一下 Bitwise Operators (位元運算)

  • << - Shift left (means "multiply by two")
  • & - And
  • | - Or (inclusive or)

程式裡有0x的為16進位數:

  • 0x80 = 16 * 8 = 128 = 10000000
  • 0xF = 15 = 1111
  • 0x3F = 3 * 16 + 15 = 48 + 15 = 63 (也可以從 ASCII table 找）

全型與半型:

  • 半型字符範圍：33-126
  • 全型字符範圍：65281-65374
  • 對應關係是相差：65248
  • 全型空格：12288
  • 半型空格：32

心得

這個function還真好用阿 XD, 又可順便複習一下 Bitwise, 雖然我們很少用到, 但它其實還有很多活用空間唷.

]]> http://blog.wabow.com/archives/1874/feed 0 Float Messenger 的應用 與 當 jQuery 遇上 Big5 http://blog.wabow.com/archives/1614 http://blog.wabow.com/archives/1614#comments Thu, 25 Jun 2009 06:00:24 +0000 suzy http://blog.wabow.com/?p=1614 大家好, 我又來了, 在這麼短時間又要發一篇blog, 實在不像我ㄚ XD....

今天要講的是如何套用 Jace 所寫的 jQuery Plugin Float Messenger.js. 然後再延伸 鍵盤控制的新功能, 讓 Enter, Esc 還有 Ctrl + O 或 Shift + O 都可以聽你的話.

這是 FloatMessenger 原來的模樣:
fm

首先我做了一個新框框, 把它 css 化, 只要掌握到下面的巢狀結構, 就可以輕易的替她換新衣服...

1
2
3
4
5
6

<div id="messenger">
    <div class="wrapper">
        <blockquote><span>MESSAGE</span></blockquote>
        <form method="post" action="">....</form>
    </div>
</div>

原本的 css 位置擺放也都已經寫好了, 稍加修改即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

#messenger {
    width: 463px;
    margin-bottom: 20px;
    background: url(bg-poll-header.gif) no-repeat 0 0;
    font-size: 12px;
    line-height:20px;
}
#messenger h2 {
    /*text-indent: -100000px;*/
    color:#ca0000;
    font-size:16px;
    padding:10px 0 0 10px;
}
#messenger .closeMessenger {
    float:right;
    padding:2px 6px;
    margin:0 8px 0 0;
    text-decoration:none;
    font-size:11px;
    color:#000;
}
#messenger .closeMessenger:hover {
    background-color:#ccc;
}
#messenger .wrapper {
    width: 463px;
    padding-bottom: 10px;
    background: url(bg-poll-footer.gif) no-repeat 0 bottom;
}
#messenger p {
    margin: 27px 10px 0 28px;
    font-size: 12px;
}
#messenger form {
    width: 458px;
    padding: 8px 0 0 5px;
    background: url(bg-poll-content.gif) repeat-y;
}
#messenger form label {
    margin-right: 10px;
}
#messenger form .btnGroup {
    margin: 10px 0 0 0;
}

變成紅白風啦啦啦啦啦 Wohoo~~
fm2

OK...一切都很順利, 不過在幾乎要完成的時候遇到了一個問題, 就是 Enter 無法使用, 這對慣用 Enter 的使用者可能會造成不便!?.. 困難點是 Float Messenger 裡面的 form submit 時, 我沒辦法讓 submit這個動作 (or Enter) 跟 '確定'按鈕同步去做同一件事, 尤其當有很多 Float Messenger 在交替使用的時候, 也沒辦法在一開始就寫死, 因為是同一個 form 的 submit() 阿....... 這個問題一度卡了我有點久, 不過昨天靈光一閃, 才發現原來其實可以很簡單.. :)

DEMO 有 Enter 煩惱的 FloatMessenger: 點我點我

我在 FloatMessenger 多加了一個 setting.. onSubmit: function() {} 

1
2
3
4
5
6
7
8
9

    $.floatMessenger({
        title: '請輸入密碼',
        message: '您輸入的 E-mail 已註冊，請輸入密碼 "111" 。',
        form: '....略',
        buttons: {
            '確定': function () { memberLoginHandler(); }
        },
        onSubmit: function () { memberLoginHandler(); return false;}
    });

然後在 FloatMessenger.js 裡加入:

1
2
3
4
5
6
7

    // 送出控制
    if (_settings.onSubmit) {
    	$('form', $html).submit(_settings.onSubmit);
    } else {
       // 這是預設, 加這行是為了防止按 enter 會直接 submit 的情形, 我不希望這樣
    	$('form', $html).submit(function(){return false}); 
    }

這樣就可以解決 Enter 的問題了, 也可以跟我想要的按鈕同步^o^... 然後既然都已經 Enter 了, 那就再來點別的吧!
我想讓 Esc 也有功能, 按了之後會 unblock! 所以我在 FloatMessenger.js 加了這個:

1
2
3
4
5
6
7

$(document).keypress(function(e){
    var key = e.charCode || e.keyCode || 0;
    if (key == 27) { // ESC
        $.unblockUI();
        return false;
    }
})

我想讓 Ctrl + 某鍵 跟 Shift + 某鍵 會有功能. 在設定檔改就可以了.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$.floatMessenger({
    title: '忘記密碼',
    message: '我們將密碼以電子郵件方式送給您。)',
    form: '',
    buttons: {
        '請寄送密碼給我 (Shift + P)': function () { getPasswordBlock(); },
        '忘了這件事 (Shift + F)': function () { $.unblockUI(); },
        '回哇寶首頁 (Shift + H)': function () { location.href='http://www.wabow.com'; }
    },
    ctrlKeys: {
    },
    shiftKeys: {
        'p':80,
        'f':70,
        'h':72
    }
});

'p' 是 key
80 是 keycode
每一個鍵都有固定的 keycode, 網路上可以查得到所有的 keycode..
這3 個 shiftKeys 其實是按照 buttons 的順序去排的, 按了之後會跟 button 有同樣的功能.

fm3

DEMO 沒有 Enter 煩惱的 FLoatMessenger: 點我點我

好, 按鍵問題終於解決了, 順便跟大家分享 jQuery 遇上 big5 中文的問題.....
我在跑 ajax 的時候, 我要 用 form POST 中文字, 然後再丟到資料庫去查詢, 可是資料庫一直查不到資料...
echo 出來的值也是對的阿, 氣死我啦, 後來才發現, 很見鬼的, Big5 的字 丟到 jQuery 它會丟出 UTF8 給你.............................

所以我們要加上 iconv 轉碼的動作:

1
2
3
4
5

// 解決 jQuery 使用 UTF-8 送出資料的問題
$big5Name = iconv('utf-8','big5', $name); 
 
// 這樣才能在資料庫找得到
$sql = "SELECT * FROM table WHERE vipName = '$big5Name'";

以為這樣就沒問題了, 上線後的第三天, 許先生抗議了...
許功蓋啦 >"<

1
2

// 解決許功蓋的問題
$big5Name = addslashes($big5Name);

然後存進 SESSION 時, 記得要加 stripslashes:

1
2

// 如果不 stripslashes 會顯示 許\先生
$_SESSION['VIP_NAME'] = stripslashes($big5Name);

心得

以為半天就可以解決的事, 結果有這麼多意想不到的問題發生.... 一度很想偷懶跳過這些工, 但是幸好有堅持下去才能解決...解決後發現其實也不難嘛 ( ￣ c￣)y▂ξ (囂張貌)

]]> http://blog.wabow.com/archives/1614/feed 2