jQuery TinyMCE remove html head body tag in textarea

TinyMCE Editor 是一個很常見的所見及所得文字編輯器,功能很強大,並提供很多插件來擴展編輯器功能,但安裝4.8.2版本時,在textarea中會自動包覆<HTML><head><body>等標籤,即便未輸入內容,然然會存入 <HTML><head><body>等標籤 。

解決方法

非常簡單,在初始 TinyMCE 的時候不要使用 fullpage 這個 plugin 舊可以了。

參考:

jQuery TinyMCE Editor

[……]

Read more

Fix An invalid form control with name=’…’ is not focusable

今天在開發一個表單程式,表單一直無法發送,開始來找問題,開啟 Chrome 開發者工具,在 Console 面板中,每送出一次表單,就會出現一個這個訊息:

An invalid form control with name=’…’ is not focusable

原因是 Chrome 阻止設定為 required 的欄位隱藏

也對拉!! 必填欄位又隱藏起來,怎麼填? 表單送出前會做一個簡單的表單驗證

這樣也不行:

<input type="text" style="display:none" required>

這樣當然也不行:

<input type="text" id="example" required>
<script>
	$('#example').hide();
</script>

這樣可以:

大概是原本就是隱藏欄位了,所以沒有特別去驗證

<input type="hidden" required>

解決方法:

開發者會去隱藏欄位當然是有原因的,有時候會因為條[……]

Read more

HTML5 a Tag 直接用手機撥電話的連結

在 a 標籤中 href 屬性中,開頭加上 tel:撥打的電話號碼 ,在手機上按下此連結會呼叫手機撥號的應用程式,並把電話輸入在電話欄中,非常方便,但要注意電話號碼格式,只能輸入數字

錯誤:02-2888-8888

正確:0228888888

<a href="tel:0228888888">聯絡我們</a>

 [……]

Read more

檔案文件 big5 轉 Utf-8 解決亂碼問題

網頁文件中的文字雖然看起來都一樣,但編碼不同可能會造成亂碼問題

假設我在head宣告文件為UTF-8,但網頁文件卻是big5編碼,可能會造成亂碼問題,網頁設計多少都會遇到過這種狀況,這時需要將文件轉換至正確的文件編碼。

 
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>

使用Notepad++檔案編碼互轉

Notepad++是有名的免費軟體 (繁體中文)

以Notepad++開啟文件


上圖紅框處為目前文件編碼


上方工具列:編碼 > 轉換至 UTF-8 碼格式 ( 檔首無BOM )

“檔首無BOM”,BOM是在檔案開始會有幾個隱藏字元,
如果不確定B[……]

Read more

HTML5的lang速查 ( 注意:繁體中文不是zh-TW喔 )

在HTML5的<html>中可增加lang=來標註網頁的語系,讓瀏覽器能更正確的解析與編碼,但從XHTML 1.0以來lang=???就不斷演進中,而在HTML5的時代究竟要怎麼定義?

目前最主要的規範是依照IETF(Internet Engineering Task Force 國際網路工程研究團隊)的RFC 4646 的Tags for Identifying Languages所定義。它的要求為 language-script-region-variant-extension-privateuse 就是 語言 – 字體 – 地區 – 方言 – 特殊附加資訊。

以台灣繁體中文標示即為zh-Hant-TW 不是以往認知的zh-tw囉

使用範例:

<!DOCTYPE html> 
<html  lang="zh-Hant-TW">
  <head>
    <title>page title</title>
  </head> 
  <body>
  </bod[......]

Read more

HTML 錨點偏移 CSS and JS 兩種方法 (offset anchor tag link)

HTML提供了一個錨點連結的功能 (anchor tag link),換頁或不換頁,都可以把瀏覽器卷軸自動捲到錨點位置,但如果網頁上方有一個黏頭的Header (sticky header),RWD手機版本則習慣使用(sticky header),Header 懸浮本文之上,可能會把錨點的元素內容遮蔽,這時我們則需要偏移(sticky header)的高度,避免錨點元素被遮蔽。[……]

Read more

href=”javascript:void(0);” 設定無作用連結 – a 標籤 href 不作任何動作

有時候我們需要用a標籤去綁定一些Javascript or JQuery事件,不是真的要做為連結之用,但是a標籤又必需設定 href , 這時大部份人就會在href加#號,但其實加#號仍然是連結,等同換了另一頁,網址末端也會加上#號(如:http://www.aaa.com#),這並不是最理想的狀況,我們不希望它做任何動作,以下寫法a標籤緊會執行javascript的事件,除此之外不會有其他動作。我們也可以比較以下兩種寫法的差異。

javascript 寫在行內

<!-- A標籤還是有動作 -->
<a href="#" onclick="alert('hello')">沒有作用</a>

<!-- A標籤不會有任何動作 -->
<a href="javascript:void(0);" onclick="alert('hello')">沒有作用</a>

jQuery解法

html:

<a href="#">沒有作用</a>

jQuery

/**
*[......]

Read more