输入时把字符串写进预览

用户要一份能放进浏览器看的页面，并提到了纯样式库。第一份回答引入了该库 3.0.0 的样式，页面有标题区、一块栅格、一枚主按钮、一枚普通按钮，以及姓名和邮箱的表单。这不是后来要的东西。

第一份不是预览

用户澄清：要能输入 HTML，并马上看到结果。第二份才是预览页。标题是 HTML 预览工具。左边是文本框，右边是一块预览。

页面用纵向弹性盒，高度是视口高度，四周留白 20 像素。中间容器横向排列并占满剩余空间，两栏间距 20 像素。文本框和预览各占一半宽。文本框禁止拖动改变大小。预览有一像素的浅色边框，内边距 10 像素，超出滚动。

脚本在输入事件上调用更新。更新函数把文本框的值赋给预览的 innerHTML。每输入一个字符就赋一次。没有防抖，也没有单独的预览按钮。

赋给 innerHTML 时，浏览器解析标签和样式，把它们画进这块预览。脚本标签不会因为这次赋值而执行。想在预览里跑脚本，这种写法做不到。

带事件属性的标签仍可能在当前页里触发。预览和工具本身是同一个文档。不要把不信任的片段贴进这个文本框。这不是隔离的框架页。

对话里的脚本没有过滤，也没有转义。你输入什么，就按 HTML 解析什么。这符合预览的目的，也说明它只能用来看自己写的片段。

第一份页面的样式库地址、按钮类名和表单字段可以丢掉。用户已经说明那是理解错了。留着两套页面会让人以为预览还依赖那个样式库。第二份没有引用它。

视口高度再加上四周留白，纵向容易超出一屏。容器用剩余空间拉伸。若预览被挤出视口，先减掉留白或改用最小高度，而不是改赋值那一行。

文本框的占位是请在这里输入 HTML。占位不是初始值。打开页面时预览是空的，要等第一次输入事件。若希望一打开就有示例，要把示例写进文本框的值，并主动调用一次更新。

右边预览是 div。它能放下普通标签。整页结构的标签放进一个 div，和单独打开一份文档不是同一件事。预览到的是片段，不是一份新的文档。

输入事件在每次变更时触发。粘贴一大段也会触发。赋值是同步的。片段很大时，频繁赋值会让输入变卡。对话没有做节流。卡顿时再加，不要先改布局比例。

赋值发生在同一个文档

颜色和字体是页面自己的样式。预览区继承这些字体。片段里的样式只影响片段内部。工具的标题样式不会自动包进预览内容。

两栏各百分之五十，再加间距。窄窗口里两栏会挤。对话没有写折行。窗口很窄时，先确认是布局挤在一起，而不是 innerHTML 没有执行。

预览的溢出是自动滚动。长内容在右栏内部滚动。左栏文本框高度百分之百，跟着容器走。两边都看不到内容时，查容器有没有被算出高度，而不是查赋值函数。

函数只做一件事：读取文本框，写进预览。选择器是 htmlInput 和 preview。这两个标识要和标签上的标识一致。改了标识却没改脚本，输入会没有反应。

没有反应时，先看控制台有没有空引用。元素没找到，事件不会挂上。挂上了却不更新，再看是不是赋值被别处覆盖。

这段页面是单个文件。不需要构建。用浏览器直接打开即可。第一份页面才依赖样式库的远程地址。第二份连远程样式都没有。

综述里如果补充了安全说明，以代码为准。代码就是输入时赋值。脚本标签不执行，是这种赋值的行为，不是另一段被省略的过滤函数。

要用它看样式，把样式写在片段里。要用它看脚本，换一种会执行脚本的预览。不要在这次赋值上反复刷新，期待脚本跑起来。

按钮和表单属于被否掉的第一份。姓名和邮箱不是预览工具的字段。预览工具的唯一输入是那块文本框。

标题在页面上方居中。它不参与预览。预览区从容器开始。验收时在左边输入一个带文字的段落，右边应出现这段文字。

再输入一个脚本标签，页面不应弹出对话框，因为脚本不会执行。这可以用来确认你看的是第二份，而不是把片段另存成了独立文档。

边框颜色是浅灰。预览和文本框靠这一圈边框分开。看不到边框时，查样式有没有被自己的片段盖住。片段的样式作用在预览内部，一般盖不住预览盒子自己的边框。

对话到这份预览为止。没有第三版。使用时以左输入、右赋值、脚本不执行为准。