如何实现预填充的输入字段？

Question

我想要一个预填充的输入字段，以便用户只能输入必要的输入。例如;输入值应为 https：// [subdomain] .xyz.com ，但用户应仅输入 subdomain 值。 URL的其他部分将固定在输入字段上。有什么建议吗？

Answer 1

<span>https://<input placeholder="subdomain">.xyz.com</span>

Answer 2

也许你想要这个

<span> 
  https://<input type="text" placeholder="enter domain name" /> 
  <select>
    <option vlaue="com">.com</option>
    <option vlaue="net">.net</option>
    <option vlaue="org">.org</option>
    <option vlaue="edu">.edu</option>
  </select>
</span>

Answer 3

.outerDiv{
  border:1px solid grey;
  display:inline-block;
  padding:5px;
  border-radius: 5px;
}

.innerTextBox{
  border: none;
  outline: none;
  text-align: right;
  width: 70px;
}

<div class="outerDiv">https://<input placeholder="subdomain" class="innerTextBox">.xyz.com</div>