與文本框有關的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" />你會對其進行編碼，以確保事情像>在你的價值不會混淆與>封閉標簽。

但是，當您使用JavaScript設置字段的值時，就不會有混淆的余地。 您沒有在修改<input.../>類的標簽； 您正在修改JavaScript對象。 因此，您不應該對該值進行HTML編碼。 如果您使用的是字符串變量，例如您的示例，則根本不需要進行任何編碼。

另一方面，如果您使用字符串文字來指定值，則需要將其編碼為JavaScript字符串，例如，通過在$("#festus").val('can\\'t')轉義' $("#festus").val('can\\'t') 。 這與您進行HTML編碼的原因完全相同； 避免與關閉字符串的'混淆。

您唯一一次使用JavaScript進行HTML編碼的時候就是使用它來生成HTML代碼，例如el.innerHTML = '<input value="10 &gt; 5" />'; 。

因此，我建議您不要在AJAX響應或請求中對字符串進行HTML編碼。 相反，請避免編碼，直到您實際生成需要編碼的那種代碼為止。 因此，在編寫HTML時僅使用HTML編碼字符串，在編寫JavaScript時僅使用JavaScript編碼字符串，依此類推。