HTML编码/解码,因为它与文本框有关

时间:2012-04-21 18:07:16

标签: javascript jquery html5 encoding textbox

我正在从Microsoft堆栈(即WPF)转换到HTML5,所以请提前为这个问题的业余性质道歉。

手头的主题是HTML编码和解码。

考虑一个HTML5应用程序,通过HTTP对C#后端进行AJAX调用。服务器独占地返回JSON格式的数据,始终确保使用HttpUtility.HTMLEncode()对JSON值字段进行HTML编码。

HTML5客户端反向执行相同的过程。发布到服务器的所有数据首先使用简单的JavaScript辅助函数进行HTML解码。

我的HTML5应用中的所有可显示的字符串数据都以HTML编码的形式存储并传递到另一个地方。这个方案对我来说很有用。但是今天我发现了HTML5文本框,在这样做时,发现了一些奇怪的东西。文本框似乎不喜欢编码文本。

如果我有一个如此定义的文本框:

<input id="festus" type="text"/>

并按如下方式更新:

$("#festus").val(someEncodedString)

...文本框显示嵌入到someEncodedString中的实际代码,而不是将这些代码转换为适当的字符。我对此行为感到惊讶,因为我假设浏览器为所有DOM元素执行正确的转义码解释。

我试图通过为val()编写一个名为val2()的帮助器/包装器来解决问题:

$.prototype.val2=function(newVal){
    return (newVal===undefined)
        ?iHub.Utils.encodeHTML(this.val())      //getting value
        :this.val(iHub.Utils.decodeHTML(newVal));   //setting value
}

[iHub.Utils是我写的辅助函数库]

这里的想法是,当获取值时,val2()将适当地编码从我的文本框中检索的数据,并在设置值之前对其进行解码。这似乎有效,但我不能动摇我必须对编码/解码如何在HTML5中起作用的基本误解的感觉。

使用文本框时编码/解码数据是标准做法吗?文本框是否特殊,因为它们与<p><select>等其他常见元素不同,在显示编码输入字符串时不执行标准解码?

再次,抱歉,如果这太基础了。 HTML5和JavaScript对我来说是相当新的,我的“HTML5简介”类书籍并没有真正深入讨论这个主题。

1 个答案:

答案 0 :(得分:4)

HTML编码适用于HTML文档。如果您将自己的价值包含在HTML文档中,例如<input value="10 &gt; 5" />,您需要对其进行编码,以确保您的值中>之类的内容不会与关闭代码的>混淆。

但是当你使用JavaScript来设置字段的值时,就没有混淆的余地了。您没有修改<input.../>之类的标记;你正在修改一个JavaScript对象。所以你不应该对这个值进行HTML编码。如果您正在使用字符串变量,就像在您的示例中一样,则根本不需要进行任何编码。

另一方面,如果您使用字符串文字来指定值,则需要将其编码为JavaScript字符串,例如通过转义'中的$("#festus").val('can\'t')。这与您进行HTML编码的原因完全相同;避免与关闭字符串的'混淆。

您在JavaScript中进行HTML编码的唯一时间就是当您使用它来生成HTML代码时,例如el.innerHTML = '<input value="10 &gt; 5" />';

因此,我建议你 HTML编码AJAX响应或请求中的字符串。相反,避免编码,直到您实际生成需要编码的代码类型。因此,在编写HTML时只编写HTML编码字符串,在编写JavaScript时只编写JavaScript编码字符串,等等。