在 Coldfusion 中使用 Font Awesome Unicode答案

【问题标题】：Using Font Awesome Unicode with Coldfusion在 Coldfusion 中使用 Font Awesome Unicode
【发布时间】：2020-12-12 20:57:53
【问题描述】：

我的 ColdFusion 应用程序中有一个 HTML 输入按钮，它正在提交表单。我正在尝试在按钮文本中包含一个 Font Awesome 图标。我可以在不引发错误的情况下指定 Unicode 的唯一方法是将哈希字符加倍。

<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();
        }

【问题讨论】：

标签： html forms coldfusion font-awesome

【解决方案1】：

您是否尝试过使用 BUTTON 标签？（我们停止使用 input:submit 按钮。）

我们通常使用<button type =“submit”><i class=“fa fa-lg fa-my-icon”></i > Label Text</button>，但您应该可以使用 HTML 实体。

【讨论】：

仅供参考：这是一个标准的 Font Awesome 的东西，而不是 ColdFusion 的东西。

【解决方案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 以防您使用引导程序）

【讨论】：

我确实考虑过，因为这样会更容易。但是我有一个脚本，一旦单击就会禁用按钮，因此表单无法提交两次。对于按钮元素而不是传统提交，我无法重现它。我可以在另一个问题中发布该问题。感谢您的意见。
我认为那是因为你有一个内联事件附加到元素上。使用事件侦听器是更好的选择，但这意味着对现有 JS 代码进行更多更新。我们在表单提交时将按钮上的 disabled 设置为 true 并且它可以工作，所以肯定有其他事情发生。（一旦禁用，该元素就不会发生任何事件。）
你是 100% 正确的，使用按钮更简单、更灵活。我也能够弄清楚如何使用事件侦听器禁用按钮。我用我的编辑更新了我的问题。谢谢。

【解决方案3】：

这不是您建议的 ColdFusion 中的怪癖。 ColdFusion 的行为完全符合预期。您需要双散列 ## 的原因是，无论何时您位于 <cfoutput> 标记中，ColdFusion 都会将单个散列 # 视为变量或可评估表达式的开始。当它没有找到关闭哈希时，它会抛出一个错误。

现在，有时您的意图是将哈希用于显示目的，而不是像您的情况那样评估变量或表达式。因此解决方案是使用双哈希## 一个转义字符让CF 知道您只想在渲染页面上将其显示为单个哈希。

如果您使用浏览器的开发人员工具并检查元素，它应该会正确显示为单个哈希值。解决问题的另一个方法是确保从 <cfoutput> 块中删除带有输入按钮的代码部分。

最重要的是，您不应该通过查看 CF 源代码进行调试，您应该使用浏览器的开发人员工具或浏览器的“查看源代码”选项查看呈现的页面来调试它。如果可以，请通过提供提交按钮的“检查元素”的屏幕截图来更新您的原始问题。

【讨论】：