如何使部分内容无法在html textarea中编辑答案

【问题标题】：how to make some parts of contents cannot be edited in html textarea如何使部分内容无法在html textarea中编辑
【发布时间】：2012-10-19 03:13:56
【问题描述】：

在我的html页面中，我有一个texteare，我会写一些内容，我想一些内容可以修改，但有些不能。

<html>
  <body>
  <div class="text">
    <textarea cols="50" rows="4" name="msg_content" id="msg_content" readonly="readonly">
        Hi, I am the contents that can be modified.
        Hi, the url cannot be modified.

        http://www.google.com
    </textarea>
  </div>
</html>

如您所见，我将 textarea 的属性之一设置为只读，但在这种情况下，无法修改全部内容。

请给我一些建议，提前谢谢。

【问题讨论】：

标签： html textarea readonly

【解决方案1】：

那是做不到的。但是，您可以使用 CSS 在文本区域内模拟禁用文本的效果。创建一个 Div 元素并将其放置在文本框的正下方，并使其看起来像是文本框的一部分。

您需要为此调整和使用 CSS。

看看这个：http://css-tricks.com/creating-a-nice-textarea/ 示例：http://css-tricks.com/examples/StyledTextArea/

【讨论】：

【解决方案2】：

除非您可以使用 HTML5，否则这是不可能的。使用 HTML5，您可以将 contenteditable=true/false 属性用于特定元素。

举个例子：

<div contenteditable="true">
 You can edit this text, 
 <p contenteditable="false">but not this one.</p>
</div>

【讨论】：

不适用于 IE11：plnkr.co/edit/eRhuzAwcxCVaLsbMn6sY?p=preview 但适用于 Chrome 和 Firefox。编辑内容时只有 Chrome 会显示边框。