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

HTML-encoding/decoding as it pertains to textboxes

本文关键字：HTML 编码 解码 文本      更新时间：2023-09-26

我正在从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)

。文本框显示嵌入到某个编码字符串中的实际代码，而不是将这些代码转换为适当的字符。我对这种行为感到惊讶，因为我假设浏览器对所有 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入门"类型的书籍并没有真正深入讨论这个话题。

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" />'; .

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

相关文章：