HTML 的 textarea 標籤不能有多層巢

在寫短文『用 javascript 來排表格』還學到一個新的經驗，就是 HTML 的 textarea 標籤不能有多層巢（nest）。例如下面的例子：

<textarea >
  <textarea >

  </textarea >
一些文字
</textarea >

textarea 標籤原本是用來作多行文字輸入的。由於此標籤也可以用來顯示預設的文字，尤其是可以放一段 HTML 標籤或 javascript 程式，卻不會被瀏覽器執行，而以文字視之。

在上面的例子中，當瀏覽器遇到第一個 <textarea > 時，瀏覽器會由 HTML 的解讀模式，進入一般文字的閱讀模式。因此當瀏覽器遇到第二個 <textarea > 時，會將之視為文字，而不是 HTML 標籤。瀏覽器繼續讀下去，遇到第一個 </textarea > 時，瀏覽器會由文字閱讀模式回到 HTML 的解讀模式。因此之後『一些文字』會被顯示在 textarea 區塊之外。也許這並非原本設計的顯示結果。

這個問題，可以用 <   /textarea > 取代第一個 </textarea >。

<textarea >
  <textarea >

  < /textarea >
一些文字
</textarea >

<   /textarea > 會被瀏覽器忽略，而以文字模式繼續讀下去，直到第二個 </textarea >。這樣就能顯示原先設計的結果。

另外我還發現各種瀏覽器的小小差異。上面的例子如果用下面的寫法：

<textarea >
  <textarea >

<!--   </textarea >    -->
一些文字
</textarea >

在 Internet Explorer 與 Firefox 瀏覽器上，註解行 中的 </textarea > 被視為文字。而 Safari 及 chrome 瀏覽器，會將註解行中的 </textarea > 當作 HTML 標籤執行之。