如何创建具有在用户输入后继续显示的预文本的文本字段

Question

如何使用在用户输入后继续显示的前文本创建文本字段

我尝试创建像

这样的文本字段

[                      yourdomain.com]

然后当用户输入yourdomain.com时不会消失，它出现在那里也无法删除。意思是不能删除。留在那里的背景

[            myaccount.yourdomain.com]

Answer 1

你走了：

HTML：

<input class=actual><input class=show value='.yourdomain.com' readonly>

CSS：

input.actual {
  text-align: right;
  border-right-width: 0;
}

input.show {
  border-left-width: 0;
}

“实际”一个是真正的输入字段，所以你也给它一个名字等。

Here is a demo.

Answer 2

对于HTML输入字段，只有两种类型的值。第一个是“值”参数，它将（可编辑的）内容放入字段中。第二个参数是“占位符”，它在输入字段中放置一些“描述”，当用户开始输入时它会消失。

<input type="text" value="@yourdomain.com" name="email">

或

<input type="text" placeholder="Your email address: such as me@yourdomain.com">

如果您希望“后缀”出现并消失，则需要使用JavaScript。您可以像下面这样访问第一个输入示例的内容：

document.getElementByName("email").value

为了检查用户是否开始或停止输入，我将使用焦点事件（OnFocus）和（OnBlur）。例如，您可以尝试执行以下操作：

<input type="text" value="@yourdomain.com" onfocus="this.value=''" onblur="this.value+='@yourdomain.com'">

我没有测试过，但我想这应该是解决这个问题的正确方法。

但请考虑使用前两个示例中的一个。如果用户点击某个字段并且内容消失，他可能会自行键入“@ domain.com”部分，然后该字段的值将是某种类型：“me @ domain.com @ yourdomain.com”。这可能会使用户感到困惑。