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 clone element and events

jQuery 一般情況下,利用 clone() 來複製元素,但是複製元素後,並沒有複製原本元素綁定的事件及數據,這點有點困擾,之前是在Clone之後,重新綁定事件,但這樣會變得很麻煩,也會讓程式碼變得很亂,在 jQuery 1.4 以後 clone() 加了一個貼心的功能,可以在複製的時候選擇要不要連事件及數據一起複製。

Demo 程式如下:

這是一個簡單的範例,在按鈕上綁定一個click事件,點擊按鈕開啟警告窗

這示例程式,當我們點擊 “Clone” 這按鈕,會複製一個上方的 “Click Me”按鈕,當我們點下新產生的 “Click Me”按鈕並沒有任何反應,代表並沒有複製到原本元素綁定的事件及數據。

See the Pen jQuery clone element by VECTOR.cool
(@ann71727) on CodePen.

接著我們看下方程式碼,用相同動作,原本的 “Click Me” 按鈕及新複製出的 “Click Me” 按鈕,都可以正常運行綁定事件,換而言之,事件成功被複製,如此就不用重新綁定,非常省事呢!

[……]

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

jQuery $.each 迴圈 continue 與 break 替代方式

在PHP中或某些語言中,可以在迴圈中使用 continue 及 break 來進行更靈活的迴圈

  • continue :跳過目前動作,繼續執行迴圈的下一個動作
  • break:跳出迴圈,停止迴圈之後的動作

在 jQuery 中迴圈是用 $.each(),但使用 continue 及 break 是不起作用的,可改用下列替代方式,可以達成相同目的。

 
$.each(data, function(index, obj){

    if ($(img).empty()) {

        return; // 等於 continue

    } else {

        return false; // 等於 break

    }

});

[……]

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

javascript list all the plugins installed in the browser

取得瀏覽器安裝的所有插件

有時需要判斷瀏覽器安裝那些第三方插件,比如:VLC、Flash Player、PDF Viewer等等,藉以作後續的動作,比如說沒有Flash Player引導user安裝,下面這程式就非常有用:

navigator.plugins

會返回一個已安裝plugin的數組

<!doctype html>
<html>
<body>
<div id="example"></div>
<script type="text/javascript">
var x=navigator.plugins.length; // store the total no of plugin stored 
var txt="Total plugin installed: "+x+"<br/>";
txt+="Available plugins are->"+"<br/>";
for(var i=0;i<x;i++)
{
  txt+=navigator[......]

Read more

javascript get query values from url 取網址參數

本篇使用 Javascript , 若想用jQuery的方法,可參考本站另一篇

jQuery get query values from url 取網址參數 

本篇提供兩種方法,擇一使用

方法一:

/*
    VECTOR COOL
    https://vector.cool
*/
function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === s[......]

Read more