ColdFusion11表单字段含双单引号时JS onBlur报Uncaught SyntaxError

核心问题分析 #

你遇到的JS语法错误，根源在于浏览器解析HTML时，会把onblur事件参数里的HTML实体（比如"）还原成实际的双引号，导致JS字符串被提前截断。例如生成的代码最终会被解析成：

ck_chg(this, "2" X 2" X 1/4" X 10' LONG")

这里双引号在"2"后就闭合了，后面的X变成未定义变量，直接触发语法错误。

最优修复方案：使用Data属性存储原始值 #

避免在事件属性中传递带特殊字符的字符串，改用HTML的data-*属性存储原始值，JS直接从元素上读取，彻底规避引号冲突问题。

1. 修改ColdFusion代码 #

<!---Coldfusion code --->
<cfloop list="#fcolumnlist#" index="c"> <!---Loop over list of fields selected--->
    <td>
        <!--- 用方括号访问查询字段，替代低效的Evaluate --->
        <cfset thisfield = t[c]>
        <!--- 用HTMLEditFormat统一转义HTML特殊字符，替代手动两次Replace --->
        <cfset thisfield = HTMLEditFormat(thisfield)>
        
        <input type="text" 
               id="#c##t.id#" 
               name="#c#" 
               value="#thisfield#"
               <!--- 存储原始转义后的值到data属性 --->
               data-original-value="#thisfield#"
               onfocus="adjWidth(this);" 
               <!--- 仅传递元素本身给函数 --->
               onblur="ck_chg(this)">
    </td>
</cfloop>

2. 修改JavaScript函数 #

function adjWidth(el)  {
    el.style.width =((el.value.length + 10) * 8) + 'px';
}

function ck_chg(el) {
    // 从data属性读取原始值，浏览器会自动解析HTML实体为实际字符
    const originalValue = el.dataset.originalValue;
    if (el.value !== originalValue) {
        el.style.backgroundColor='#05AD05';
        el.style.color='#FFFFFF';
    } else {
        el.style.backgroundColor='';
        el.style.color='#000000';
    }
}

额外优化点 #

• 用t[c]替代Evaluate('t.#c#')：Evaluate性能低且存在安全风险，直接用方括号访问查询/结构体字段是ColdFusion动态访问的标准写法。
• 用HTMLEditFormat简化转义：该函数会自动转义所有HTML特殊字符（双引号、单引号、&、<、>等），比手动Replace更全面简洁。

备选方案：JS字符串转义（不推荐） #

如果一定要在事件参数中传递值，需要对参数进行JS层面的转义，把双引号转成\"、单引号转成\'：

<cfset thisfield = t[c]>
<cfset thisfield = HTMLEditFormat(thisfield)>
<!--- 额外添加JS转义 --->
<cfset jsValue = Replace(thisfield, '"', '\\"', "ALL")>
<cfset jsValue = Replace(jsValue, "'", "\\'", "ALL")>

然后onblur写成：

onblur="ck_chg(this, '#jsValue#')"

但这种方法需要处理HTML和JS两层转义，容易出错，优先推荐Data属性方案。

内容的提问来源于stack exchange，提问作者GThurmon