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

How to create textfield with pre text that continue appear after user input

本文关键字：置文本 创建 字段 文本 显示 继续 何使用 用户 输入      更新时间：2023-09-26

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

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

[                      yourdomain.com]

然后，当用户键入 yourdomain.com 没有消失时，它会出现在那里，也无法删除。 表示无法删除。 留在后台

[            myaccount.yourdomain.com]

你来了：

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

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

这是一个演示。

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

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

相关文章：