使用字體 Awesome Unicode 和 Coldfusion

Question

我在提交表單的 ColdFusion 應用程序中有一個 HTML 輸入按鈕。 我正在嘗試在按鈕文本中包含一個 Font Awesome 圖標。 我可以指定 Unicode 而不會引發錯誤的唯一方法是將 hash 字符加倍。

<input class="stylized_btn" tabindex="0" type="submit" name="save2" 
    id="save2" value=" &##xf0c7; Save This Ticket" 
    onclick="disableSaveButtonClick(event);" />

但是，它不顯示圖標，而是顯示一個正方形。

這似乎是一個怪癖，ColdFusion 由於雙標簽而無法識別我的 Unicode 字符，但這只是一個猜測。 我的頁面上有其他按鈕元素可以正確顯示 Font Awesome 圖標，所以我知道這不是我的字體定義的問題。 我不確定我到底哪里出錯了。 任何人都可以幫忙闡明一下嗎？

改為使用按鈕標簽更新代碼。

HTML按鈕

<button id="saveOnlyButton" name="save" class="stylized_btn">
    <i class="fas fa-save"> </i> Update Ticket
</button> 

JavaScript

window.onload=function(){
    var SaveButton = document.getElementById("saveOnlyButton");
    SaveButton.addEventListener("click", disableSaveButton);
    }

    //Save Button Logic
        function disableSaveButton() {
            console.log("Save button clicked");
            document.getElementById("submitType").value = "save";
            document.getElementById("saveOnlyButton").innerHTML = "Please Wait...";
            document.getElementById("saveOnlyButton").disabled = true;
            document.getElementById("autoSumForm").submit();
        }   

Answer 1

您是否嘗試過使用 BUTTON 標簽？ （我們停止使用 input:submit 按鈕。）

我們通常使用<button type =“submit”><i class=“fa fa-lg fa-my-icon”></i > Label Text</button> ，但您應該可以使用 HTML 實體。

Answer 2

不要使用輸入元素，而是使用按鈕。 按鈕的默認行為是提交表單。

<button class="stylized_btn btn-default" tabindex="0" id="save2" onclick="disableSaveButtonClick(event);"><i class="fa fa-save"></i> Save This Ticket</button>

（我添加了 btn-default 以防您使用引導程序）

Answer 3

正如您所建議的，這不是 ColdFusion 中的怪癖。 ColdFusion 的行為完全符合預期。 您需要雙 hash ##的原因是因為每當您在<cfoutput>標記中時，ColdFusion 將單個 hash #視為變量或 evalu 表達式的開始。 當它沒有找到關閉的 hash 時，它會拋出一個錯誤。

現在有時您的意圖是將 hash 用於顯示目的，而不是像您的情況那樣評估變量或表達式。 所以解決方案是使用雙 hash ##一個轉義字符讓 CF 知道您只想在渲染頁面上將其顯示為單個 hash。

如果您使用瀏覽器的開發人員工具並檢查元素，它應該會正確顯示為單個 hash。 解決問題的另一個方法是確保從<cfoutput>塊中刪除帶有輸入按鈕的代碼部分。

最重要的是，您不應該通過查看 CF 源代碼進行調試，您應該使用瀏覽器的開發人員工具或瀏覽器的“查看源代碼”選項查看呈現的頁面來調試它。 如果可以，請通過提供提交按鈕的“檢查元素”的屏幕截圖來更新您的原始問題。