javascript - 如何创建用户不可编辑的 HTML 表单默认短语？

Question

我希望向 HTML 表单字段添加一些逻辑。

在我的元素中，我让用户在他们的提交表单中创建一个标题。其中一个表单字段是 "Title"用户可以在其中输入自己的自定义标题。我想强制使用 "#KICK..." 这句话在表单字段中并保留它，这样用户将无法删除它，并且必须在短语 "#KICK..." 之后写下他们的自定义标题。 .

我一直在努力弄清楚我可以去哪里学习如何做这样的事情，但一直无法找到任何东西。很乐意被指出正确的方向或听到某人可能会做些什么来完成这项任务。

Answer 1

不幸的是，没有内置的方法可以为表单元素添加前缀。但是，您可以使用 Javascript 或 CSS 解决这个问题。

这是一个只有 CSS 的方法..

div { position: relative }
div:before {
    align-items: center;
    content: '#KICK...';
    display: flex;
    height: 100%;
    margin-left: 7px;
    position: absolute;
}

input {
    font-family: inherit;
    font-size: inherit;
    padding-left: 68px;
}

<div>
    <input>
</div>

尝试使用 margin-left 和 padding-left 使其适合您现有的样式。