javascript - 与文本框相关的 HTML 编码/解码

Question

我正在从 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 简介”类型的书籍并没有真正深入地讨论这个主题。

Answer 1

HTML 编码适用于 HTML 文档。如果您将您的值包含在 HTML 文档本身中，例如<input value="10 &gt; 5" /> ，您可以对其进行编码，以确保像 > 这样的东西您的值(value)不要与 > 混淆关闭标签。

但是当您使用 JavaScript 设置字段的值时，就不会产生混淆。您没有修改像 <input.../> 这样的标签;您正在修改 JavaScript 对象。因此您不应该对该值进行 HTML 编码。如果您使用字符串变量(如示例所示)，则根本不需要进行任何编码。

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

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

因此，我建议您不要在 AJAX 响应或请求中对字符串进行 HTML 编码。相反，在实际生成需要编码的代码之前，请避免编码。因此，在编写 HTML 时仅对字符串进行 HTML 编码，在编写 JavaScript 时仅对字符串进行 JavaScript 编码，等等。