javascript - 如何使用在用户输入后继续出现的前置文本创建文本字段

Question

如何使用在用户输入后继续出现的前置文本创建文本字段

我试图创建一个文本字段，例如

[                      yourdomain.com]

然后当用户类型 yourdomain.com 没有消失时，它出现在那里也不能被删除。表示不能删除。留在后台

[            myaccount.yourdomain.com]

score 2 · Accepted Answer

干得好：

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;
}

“实际”是真正的输入字段，因此您还可以给它一个名称等。

score 0 · Accepted Answer

对于 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”。这可能会使用户感到困惑。

2 回答 2