Emoji 表情符號輸入小幫手 (書籤工具)

前陣子有讀者留言時使用 Unicode 表情符號，覺得效果還不錯，語意看起來活潑許多，因此決定動手做個表情符號的輸入工具。

其實這類的留言輔助工具，在網路上已經可以找到一些，而寫部落格的初期，也曾思考過是否安裝這類的外掛。但這畢竟算是使用率較低的工具，如果為了花俏的功能而拖慢網頁載入的速度，我認為並不值得，因此一直擱置這個構想。

那麼現在重啟這個計畫，是因為找到了不錯的解決方案，部落格不用特別安裝外掛，自然也不會影響網頁載入速度。

(圖片出處: pexels.com)

一、書籤工具介紹

1. 一般外掛的隱憂

目前在網路上能找到的解決方案，主要是用 "圖片" 的方式來顯示表情符號，那麼會有兩種隱憂：

• 外掛連結：作者不再維護、或網頁空間失效
• 圖片連結：圖床失效

不管是哪種失效，將來都會很麻煩，可能表情符號的圖片會變成叉燒包，或是留下一串亂碼字串。詳情的說明可參考「Emoji 表情符號輸入小幫手 (網頁版)」→「二、其他工具」→「使用圖案、表情圖案外掛」


2. Unicode 的優點

使用 Unicode 表情符號，就不用擔心圖片連結失效的問題，而且還可以跨平台顯示，能確保文章、留言使用的符號，將來都不會不見。

而為了讓不同作業系統版本可以顯示，此工具只挑選 Win7 可顯示的 Unicode 特殊符號，以確保相容性。


3. 書籤版

將這個外掛工具做成書籤執行，網站就不必每次載入頁面時都執行外掛，把執行權交給使用者決定，需要輸入表情符號時，才點擊書籤執行工具。。


4. 需要有網路空間

為了能用書籤執行，使用者必須有網路空間存放 js 外連，例如 Dropbox、Github 等，安裝步驟會多一些。

二、執行效果

上圖為點擊標籤工具後的效果，螢幕上會彈出「Emoji 表情符號輸入小幫手」視窗，點擊圖案後，即可貼在留言框。

想要先測試這個工具的效果，可在「Emoji 表情符號輸入小幫手」操作網頁版的功能，基本上跟書籤版的介面大同小異。

三、安裝步驟

<a href="javascript:var emojiTop = 50, emojiRight = 10, getScript=function(d,f){var e=document.createElement('script');if(e.readyState){e.onreadystatechange=function(){if(e.readyState=='loaded'||e.readyState=='complete'){e.onreadystatechange=null;if(f){f()}}}}else{e.onload=function(){if(f){f()}}}e.src=d;document.documentElement.firstChild.appendChild(e)},callback=function(){(function($){var emojiSet=[{name:'表情+人物',logo:'😄',emoji:['😄','😃','😊','😉','😍','😘','😚','😜','😝','😳','😁','😔','😌','😒','😞','😣','😢','😂','😭','😪','😥','😰','😅','😓','😩','😫','😨','😱','😠','😡','😤','😖','😆','😋','😷','😎','😵','😲','😈','👿','😐','😶','😇','😏','👲','👳','👮','👷','💂','👶','👦','👧','👨','👩','👴','👵','👱','👼','👸','😺','😸','😻','😽','😼','🙀','😿','😹','😾','👹','👺','🙈','🙉','🙊','💀','👽','💩','💤','💨','👂','👀','👃','👅','👄','👍','👎','👌','👊','✊','✌','👋','✋','👐','👆','👇','👉','👈','🙌','🙏','☝','👏','💪','🚶','🏃','💃','👫','👪','💏','💑','👯','🙆','🙅','💁','🙋','💆','👰','🙎','🙍','🙇']},{name:'圖案+動植物',logo:'❤',emoji:['💛','💙','💜','💚','❤','💔','💗','💓','💕','💖','💞','💘','💌','💋','💍','💎','👤','💬','👣','✨','🌟','💫','💥','💢','💦','💧','🌑','🌓','🌔','🌕','🌛','🌙','🌏','🌋','🌌','🌠','⭐','☀','⛅','☁','⚡','☔','❄','⛄','🌀','🌁','🌈','🌊','📧','📥','📤','✉','📩','📨','📫','📪','📮','📦','📝','📄','📃','📑','📊','📈','📉','📜','📋','📅','📆','📇','📁','📂','✂','📌','📎','✒','✏','📏','📐','📕','📗','📘','📙','📓','📔','📒','📚','📖','🔖','📛','📰','🐶','🐺','🐱','🐭','🐹','🐰','🐸','🐯','🐨','🐻','🐷','🐽','🐮','🐗','🐵','🐒','🐴','🐑','🐘','🐼','🐧','🐦','🐤','🐥','🐣','🐔','🐍','🐢','🐛','🐝','🐜','🐞','🐌','🐙','🐚','🐠','🐟','🐬','🐳','🐎','🐲','🐡','🐫','🐩','🐾','💐','🌸','🌷','🍀','🌹','🌻','🌺','🍁','🍃','🍂','🌿','🌾','🍄','🌵','🌴','🌰','🌱','🌼']},{name:'物品+食物',logo:'🍸',emoji:['☕','🍵','🍶','🍺','🍻','🍸','🍹','🍷','🍴','🍕','🍔','🍟','🍗','🍖','🍝','🍛','🍤','🍱','🍣','🍥','🍙','🍘','🍚','🍜','🍲','🍢','🍡','🍳','🍞','🍩','🍮','🍦','🍨','🍧','🎂','🍰','🍪','🍫','🍬','🍭','🍯','🍎','🍏','🍊','🍒','🍇','🍉','🍓','🍑','🍈','🍌','🍍','🍠','🍆','🍅','🌽','🎍','💝','🎎','🎒','🎓','🎏','🎆','🎇','🎐','🎑','🎃','👻','🎅','🎄','🎁','🎋','🎉','🎊','🎈','🎌','🔮','🎥','📷','📹','📼','💿','📀','💽','💾','💻','📱','☎','📞','📟','📠','📡','📺','📻','🔊','🔔','📢','📣','⏳','⌛','⏰','⌚','🔓','🔒','🔏','🔐','🔑','🔎','💡','🔦','🔌','🔋','🔍','🛀','🚽','🔧','🔩','🔨','🚪','🚬','💣','🔫','🔪','💊','💉','💰','💴','💵','💳','💸','📲','🎩','👑','👒','👟','👞','👡','👠','👢','👕','👔','👚','👗','🎽','👖','👘','👙','💼','👜','👝','👛','👓','🎀','🌂','💄']},{name:'各種活動',logo:'✈',emoji:['🎨','🎬','🎤','🎧','🎼','🎵','🎶','🎹','🎻','🎺','🎷','🎸','👾','🎮','🃏','🎴','🎲','🎯','🏈','🏀','⚽','⚾','🎾','🎱','🎳','⛳','🏁','🏆','🎿','🏂','🏊','🏄','🎣','💇','💅','🏠','🏡','🏫','🏢','🏣','🏥','🏦','🏪','🏩','🏨','💒','⛪','🏬','🌇','🌆','🏯','🏰','⛺','🏭','🗼','🗾','🗻','🌄','🌅','🌃','🗽','🌉','🎠','🎡','⛲','🎢','🚢','⛵','🚤','⚓','🚀','✈','💺','🚉','🚄','🚅','🚇','🚃','🚌','🚙','🚗','🚕','🚚','🚨','🚓','🚒','🚑','🚲','💈','🚏','🎫','🚥','⚠','🚧','🔰','⛽','🏮','🎰','♨','🗿','🎪','🎭','📍','🚩']},{name:'雜項',logo:'🕒',emoji:['1⃣','2⃣','3⃣','4⃣','5⃣','6⃣','7⃣','8⃣','9⃣','0⃣','🔟','🔢','#⃣','🔣','⬆','⬇','⬅','➡','🔠','🔡','🔤','↗','↖','↘','↙','↔','↕','◀','▶','🔼','🔽','↩','↪','⏪','⏩','⏫','⏬','⤵','⤴','🆗','🆕','🆙','🆒','🆓','🆖','📶','🎦','🈁','🈯','🈳','🈵','🈴','🈲','🉐','🈹','🈺','🈶','🈚','🚻','🚹','🚺','🚼','🚾','🅿','♿','🚭','🈸','Ⓜ','🉑','㊙','㊗','🆑','🆘','🆔','🚫','🔞','⛔','✳','❇','❎','✅','✴','💟','🆚','📳','📴','🅰','🅱','🆎','🅾','💠','➿','♻','♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓','⛎','🔯','🏧','💹','💲','💱','©','®','™','❌','‼','⁉','❗','❓','❕','❔','⭕','🔝','🔚','🔙','🔛','🔜','🔃','🕛','🕐','🕑','🕒','🕓','🕔','🕕','🕖','🕗','🕘','🕙','🕚','✖','➕','➖','➗','♠','♥','♣','♦','💮','💯','✔','☑','🔘','🔗','➰','〰','〽','🔱','◾','◽','▪','▫','🔺','🔲','🔳','⚫','⚪','🔴','🔵','🔻','⬜','⬛','🔶','🔷','🔸','🔹']}],l=emojiSet.length,html='',i,j,emoji;$('head').append('<style>#emoji_popBox{text-align:center;position:fixed;top:'+emojiTop+'px;right:'+emojiRight+'px;width:480px;z-index:999;padding:8px;box-shadow:0 0 1em #444;background-color:#efefef;box-sizing:border-box}#emoji_popBox *{box-sizing:border-box}.emoji_wrapper{margin:auto;border:1px solid #aaa;text-align:center;background-color:#fff;border-radius:5px}.emoji_title{padding:10px;font-size:20px;font-weight:700;color:#fff;text-shadow:0 -2px 1px rgba(0,0,0,0.25);background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.25,#3b3b3b),color-stop(0.75,#575757));background-image:linear-gradient(bottom,#3b3b3b 25%,#575757 75%);background-image:-moz-linear-gradient(bottom,#3b3b3b 25%,#575757 75%);background-image:-o-linear-gradient(bottom,#3b3b3b 25%,#575757 75%);background-image:-webkit-linear-gradient(bottom,#3b3b3b 25%,#575757 75%);background-image:-ms-linear-gradient(bottom,#3b3b3b 25%,#575757 75%);-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.emoji_content{padding:10px}.emoji_message{font-size:16px}#emoji_tab_set{margin-top:15px;border:1px solid #999;border-bottom:0;background:#eee;font-size:30px;height:50px;overflow:hidden}.emoji_tab{float:left;width:60px;line-height:50px;cursor:pointer}.emoji_tab:hover{background:#fff!important}#emoji_icon_set{font-size:20px;margin-bottom:15px;padding:5px;border:1px solid #999;border-top:0;overflow:hidden}.emoji_icon_box{display:none;height:190px;overflow:auto}.emoji_icon{float:left;width:32px;line-height:32px;height:32px;cursor:pointer}.emoji_icon:hover{background:#83A38C;color:#fff}.emoji_icon:active{opacity:.5}.emoji_footer{margin:0;font-size:12px width: 100%;border-top:1px solid #eee;text-align:center;padding:8px}.emoji_closeBtn{min-width:75px;color:#333;text-align:center;font-size:13px;line-height:26px;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;cursor:pointer;background-color:#f5f5f5;border:1px solid #ccc;border-bottom-color:#b3b3b3;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05)}.emoji_closeBtn:active{background-color:#e6e6e6;background-color:#d9d9d9 \9;background-image:none;outline:0;box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)}.emoji_closeBtn:hover{color:#333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;transition:background-position .1s linear}</style>');var _0xedbc=['\x24\x28\x22\x52\x22\x29\x2E\x41\x28\x22\x3C\x31\x20\x36\x3D\x27\x6E\x27\x3E\x3C\x31\x20\x33\x3D\x27\x53\x27\x3E\x3C\x31\x20\x33\x3D\x27\x54\x27\x3E\x64\x20\u8868\u60C5\u7B26\u865F\u8F38\u5165\u5C0F\u5E6B\u624B\x3C\x2F\x31\x3E\x3C\x31\x20\x33\x3D\x27\x73\x27\x3E\x3C\x31\x20\x33\x3D\x27\x42\x27\x3E\u9EDE\u64CA\u5716\u793A\u5F8C\u6703\u81EA\u52D5\u8907\u88FD\u5230\u526A\u8CBC\u7C3F\uFF0C\u518D\u6309\x20\x4A\x2D\x56\x20\u5373\u53EF\u8CBC\u4E0A\x3C\x2F\x31\x3E\x3C\x31\x20\x36\x3D\x27\x38\x27\x3E\x3C\x2F\x31\x3E\x3C\x31\x20\x36\x3D\x27\x66\x27\x3E\x3C\x2F\x31\x3E\x3C\x61\x20\x55\x3D\x27\x57\x3A\x2F\x2F\x58\x2E\x31\x38\x2E\x68\x2F\x6B\x2F\x6D\x2F\x34\x2D\x6F\x2D\x70\x2D\x71\x2D\x72\x2E\x32\x27\x20\x74\x3D\x27\x75\x27\x20\x76\x3D\x27\x77\x2D\x78\x3A\x20\x79\x3B\x20\x7A\x3A\x20\x23\x67\x3B\x20\x39\x2D\x43\x3A\x20\x44\x2C\x20\x45\x2C\x20\x46\x2D\x47\x3B\x20\x39\x2D\x48\x3A\x20\x49\x3B\x20\x27\x20\x62\x3D\x27\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x4B\x20\x4C\x20\x27\x3E\u24E6\x20\x64\x20\x4D\x20\x4E\x3C\x2F\x61\x3E\x3C\x2F\x31\x3E\x3C\x31\x20\x33\x3D\x27\x4F\x20\x27\x3E\x3C\x63\x20\x33\x3D\x27\x50\x20\x27\x3E\x51\x3C\x2F\x63\x3E\x3C\x2F\x31\x3E\x3C\x2F\x31\x3E\x3C\x2F\x31\x3E\x22\x29\x3B\x37\x28\x69\x3D\x30\x3B\x69\x3C\x6C\x3B\x69\x2B\x2B\x29\x7B\x34\x3D\x65\x5B\x69\x5D\x3B\x32\x2B\x3D\x22\x3C\x35\x20\x33\x3D\x27\x59\x27\x20\x5A\x2D\x31\x30\x3D\x27\x22\x2B\x69\x2B\x22\x27\x20\x62\x3D\x27\x22\x2B\x34\x2E\x31\x31\x2B\x22\x27\x3E\x22\x2B\x34\x2E\x31\x32\x2B\x22\x3C\x2F\x35\x3E\x22\x7D\x24\x28\x22\x23\x38\x22\x29\x2E\x32\x28\x32\x29\x3B\x24\x28\x22\x23\x38\x20\x35\x22\x29\x2E\x31\x33\x28\x30\x29\x2E\x31\x34\x28\x22\x31\x35\x22\x2C\x22\x23\x31\x36\x22\x29\x3B\x32\x3D\x22\x22\x3B\x37\x28\x69\x3D\x30\x3B\x69\x3C\x6C\x3B\x69\x2B\x2B\x29\x7B\x34\x3D\x65\x5B\x69\x5D\x2E\x34\x3B\x32\x2B\x3D\x22\x3C\x31\x20\x33\x3D\x27\x31\x37\x27\x3E\x22\x3B\x37\x28\x6A\x20\x31\x39\x20\x34\x29\x7B\x32\x2B\x3D\x22\x3C\x35\x20\x33\x3D\x27\x31\x61\x27\x3E\x22\x2B\x34\x5B\x6A\x5D\x2B\x22\x3C\x2F\x35\x3E\x22\x7D\x32\x2B\x3D\x22\x3C\x2F\x31\x3E\x22\x7D\x24\x28\x22\x23\x66\x22\x29\x2E\x32\x28\x32\x29\x3B','\x7C','\x73\x70\x6C\x69\x74','\x7C\x64\x69\x76\x7C\x68\x74\x6D\x6C\x7C\x63\x6C\x61\x73\x73\x7C\x65\x6D\x6F\x6A\x69\x7C\x73\x70\x61\x6E\x7C\x69\x64\x7C\x66\x6F\x72\x7C\x65\x6D\x6F\x6A\x69\x5F\x74\x61\x62\x5F\x73\x65\x74\x7C\x66\x6F\x6E\x74\x7C\x7C\x74\x69\x74\x6C\x65\x7C\x62\x75\x74\x74\x6F\x6E\x7C\x45\x6D\x6F\x6A\x69\x7C\x65\x6D\x6F\x6A\x69\x53\x65\x74\x7C\x65\x6D\x6F\x6A\x69\x5F\x69\x63\x6F\x6E\x5F\x73\x65\x74\x7C\x63\x63\x63\x7C\x63\x6F\x6D\x7C\x7C\x7C\x32\x30\x31\x37\x7C\x7C\x30\x35\x7C\x65\x6D\x6F\x6A\x69\x5F\x70\x6F\x70\x42\x6F\x78\x7C\x75\x6E\x69\x63\x6F\x64\x65\x7C\x69\x6E\x70\x75\x74\x7C\x68\x65\x6C\x70\x65\x72\x7C\x62\x6F\x6F\x6B\x6D\x61\x72\x6B\x7C\x65\x6D\x6F\x6A\x69\x5F\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x73\x74\x79\x6C\x65\x7C\x74\x65\x78\x74\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x6E\x6F\x6E\x65\x7C\x63\x6F\x6C\x6F\x72\x7C\x61\x70\x70\x65\x6E\x64\x7C\x65\x6D\x6F\x6A\x69\x5F\x6D\x65\x73\x73\x61\x67\x65\x7C\x66\x61\x6D\x69\x6C\x79\x7C\x68\x65\x6C\x76\x65\x74\x69\x63\x61\x7C\x61\x72\x69\x61\x6C\x7C\x73\x61\x6E\x73\x7C\x73\x65\x72\x69\x66\x7C\x73\x69\x7A\x65\x7C\x31\x32\x70\x78\x7C\x43\x74\x72\x6C\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x49\x6E\x70\x75\x74\x7C\x48\x65\x6C\x70\x65\x72\x7C\x65\x6D\x6F\x6A\x69\x5F\x66\x6F\x6F\x74\x65\x72\x7C\x65\x6D\x6F\x6A\x69\x5F\x63\x6C\x6F\x73\x65\x42\x74\x6E\x7C\x43\x4C\x4F\x53\x45\x7C\x62\x6F\x64\x79\x7C\x65\x6D\x6F\x6A\x69\x5F\x77\x72\x61\x70\x70\x65\x72\x7C\x65\x6D\x6F\x6A\x69\x5F\x74\x69\x74\x6C\x65\x7C\x68\x72\x65\x66\x7C\x7C\x68\x74\x74\x70\x7C\x77\x77\x77\x7C\x65\x6D\x6F\x6A\x69\x5F\x74\x61\x62\x7C\x64\x61\x74\x61\x7C\x69\x64\x78\x7C\x6E\x61\x6D\x65\x7C\x6C\x6F\x67\x6F\x7C\x65\x71\x7C\x63\x73\x73\x7C\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x7C\x66\x66\x66\x7C\x65\x6D\x6F\x6A\x69\x5F\x69\x63\x6F\x6E\x5F\x62\x6F\x78\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x69\x6E\x7C\x65\x6D\x6F\x6A\x69\x5F\x69\x63\x6F\x6E','','\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65','\x72\x65\x70\x6C\x61\x63\x65','\x5C\x77\x2B','\x5C\x62','\x67'];eval(function(_0x5c56x1,_0x5c56x2,_0x5c56x3,_0x5c56x4,_0x5c56x5,_0x5c56x6){_0x5c56x5=function(_0x5c56x3){return(_0x5c56x3<_0x5c56x2?_0xedbc[4]:_0x5c56x5(parseInt(_0x5c56x3/_0x5c56x2)))+((_0x5c56x3=_0x5c56x3%_0x5c56x2)>35?String[_0xedbc[5]](_0x5c56x3+29):_0x5c56x3.toString(36))};if(!_0xedbc[4][_0xedbc[6]](/^/,String)){while(_0x5c56x3--){_0x5c56x6[_0x5c56x5(_0x5c56x3)]=_0x5c56x4[_0x5c56x3]||_0x5c56x5(_0x5c56x3)}_0x5c56x4=[function(_0x5c56x5){return _0x5c56x6[_0x5c56x5]}];_0x5c56x5=function(){return _0xedbc[7]};_0x5c56x3=1}while(_0x5c56x3--){if(_0x5c56x4[_0x5c56x3]){_0x5c56x1=_0x5c56x1[_0xedbc[6]](new RegExp(_0xedbc[8]+_0x5c56x5(_0x5c56x3)+_0xedbc[8],_0xedbc[9]),_0x5c56x4[_0x5c56x3])}}return _0x5c56x1}(_0xedbc[0],62,73,_0xedbc[3][_0xedbc[2]](_0xedbc[1]),0,{}));$('#emoji_icon_set div').eq(0).show();$('.emoji_tab').click(function(){var $this=$(this),idx=$this.attr('data-idx');$this.siblings().css('background','#eee');$this.css('background','#fff');$('.emoji_icon_box').hide();$('.emoji_icon_box').eq(idx).fadeIn()});$('.emoji_icon').click(function(){var icon=$(this).text(),$temp=$('<input>');$('body').append($temp);$temp.val(icon).select();document.execCommand('copy');$temp.remove();$('.emoji_message').hide();$('.emoji_message').html(icon+' 已複製，按 Ctrl-V 即可貼上！').css('color','#990000').fadeIn()});$('.emoji_closeBtn').click(function(){$('#emoji_popBox').remove()})})(jQuery);};getScript('https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js',callback);">將此連結拖曳到書籤列或加入書籤</a>
有幾個地方需要修改：

• 藍色數字 50 及 10 分別代表執行後，彈出視窗與螢幕上方、及右方的距離(px值)

完成以上修改後，可以開始製作書籤連結，有兩種方式：

1. 如果熟悉如何製作書籤的話，請將全部有顏色的字串(含改過的 js 連結)複製，貼到書籤的連結即可使用

2. 如果對書籤製作不熟悉，以 Blogger 為例，可開一篇新文章，貼上所有程式碼(含改過的 js)，儲存後即可看到文章內的這個超連結。然後直接將超連結拖曳到書籤列即可使用。

3. 要叫出「表情符號輸入小幫手」時，點擊製作好的書籤即可。

更多字型相關文章：