输入只读 CSS

在 web 开发中，有时候我们需要让用户查看特定的 CSS 样式，但却不希望用户进行任何修改，这时候就需要使用只读的 CSS textarea。

实现方法

HTML

可以通过 textarea 标签来实现用户输入 CSS，加上 readonly 属性即可设置为只读。

<textarea readonly></textarea>

CSS

为了美观，我们还需要为其添加样式。

textarea[readonly] {
  border: none;
  width: 100%;
  height: 200px;
  font-family: 'Courier New', Courier, monospace;
  background-color: #FAFAFA;
  color: #999;
  padding: 10px;
  font-size: 14px;
}

JavaScript

如果我们需要动态生成只读 CSS，可以使用 JavaScript 将 CSS 插入到 textarea 标签中。

const css = `body {
  background-color: #F5F5F5;
  font-family: Arial, sans-serif;
}`;

const textarea = document.createElement('textarea');
textarea.value = css;
textarea.setAttribute('readonly', '');
document.body.appendChild(textarea);

总结

只读的 CSS textarea 是非常实用的一种工具，可以在一定程度上防止用户恶意修改我们设计好的样式。通过 HTML、CSS 和 JavaScript 的结合，我们可以非常简单地实现它。