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

JQuery Invalid or unexpected token

在載入 jquery.min.js 會出現下列錯誤:

Uncaught SyntaxError: Invalid or unexpected token

沒有去編輯 jquery.min.js 理論上應該不會出現這種錯誤,如果你已經嘗試各種方法還是會出現這錯誤,並確認程式編寫沒問題,仍然出現此錯誤,無計可施求助無門可以繼續看看這篇文章,也許對你會有幫助。

常見原因:

大部分的情況都是因為程式碼錯誤而造成,常見錯誤全形或半形 「<」「<」、
「“」「”」 、 「`」「’」,或是字串引號開頭結尾不同,請詳細您的檢視程式碼,就可以快速排除這錯誤。

但本篇文章是載入原生地 jquery.min.js 出現的錯誤,顯然不是這方面錯誤。

排除錯誤:

場景:這支 jquery.min.js 在遠端 Server 上是可運行的,透過 Filezilla FTP下載原始碼到 localhost Server 上用相同HTML引入這支 jquery.min.js 並於 Server 中運行,就會得到上述錯誤。

除錯開始

理論上 jq[……]

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

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

CSS Calc運算

終於是等到這個功能了,CSS3增加了Calc()這個function進行數值運算,大部分用於容器寬度或高度的計算,這讓CSS的開發更快、靈活度更高並增加重複使用的可能性,Calc()還有一個很棒的優點,可以針對不同單位進行運算。

支援運算:

+


*

/

CSS Calc運算

下方範例可以得到欄位寬度,可用來製作自己的網格系統

.column-1 {
  width: calc( 100% / 1);
}

.column-2 {
  width: calc( 100% / 2);
}

.column-3 {
  width: calc( 100% / 3);
}

 不同單位運算

#element1 {
  width: calc(50% - 2em);
}

參考資料:

[……]

Read more