在输入框上放置固定文本

Question

如何在HTML文本输入框中放置默认文本，使用户无法删除（固定文本位于输入框开头）。

我想要的第二件事是光标定位在这个固定文本之后。

- Brahim

---

你需要使用JavaScript来完成这个任务。另外，为什么你想要这样做呢？为什么不在输入框前面添加一个标签或类似的东西呢？我认为这种方法会让用户感到困惑。 - Peter Rasmussen

@Vucko 占位符在聚焦和输入文本时被移除。 - Henrik Andersson

文本必须在输入框中吗？如果不是的话，请查看Bootstrap的表单文档中的“前置和后置输入”部分（http://twitter.github.io/bootstrap/base-css.html#forms）。您可以在输入框中添加/前置文本。 - Osiris

@Vucko打败了我，通常我发现如果输入字段没有清除，它只会使用户感到困惑。 - Henrik Andersson

@Osiris 谢谢，这正是我需要的。顺便说一下，Bootstrap“前置和后置输入”的链接已更改为：http://getbootstrap.com/2.3.2/base-css.html#forms - Frank Fang

Answer 1

试试这个。它可能对你有帮助。它使用绝对定位将文本放在文本输入框上方。

.input-box { 
  position: relative; 
}

input { 
  display: block; 
  border: 1px solid #d7d6d6; 
  background: #fff; 
  padding: 10px 10px 10px 20px; 
  width: 195px; 
}

.unit { 
  position: absolute; 
  display: block; 
  left: 5px; 
  top: 10px; 
  z-index: 9; 
}

<div class="input-box">
  <input value="" autofocus="autofocus"/>
  <span class="unit">£</span>
</div>

- Manish Sharma

Answer 2

如果你只想使用一个输入元素来解决这个问题，你可以使用内联SVG背景。

要使它在Internet Explorer中工作，您需要对SVG图像进行encodeURIComponent处理。 http://codepen.io/anon/pen/pJoBya http://pressbin.com/tools/urlencode_urldecode/

input {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><text x="5" y="19" style="font: bold 16px Arial;">Age:</text></svg>') no-repeat;
  border: 1px solid #555;
  box-sizing: border-box;
  font: 16px "Arial";
  height: 30px;
  padding-left: 50px;
  width: 300px;
}

<input type="text" />

- Ben Besuijen

---

一个非常酷的解决方案。至少在Chrome中，即使用户缩放，文本大小也会增加。 - hgoebl

Answer 3

我知道这个问题已经得到了答复，但是这里有另一种方法来解决它。

我用以下代码进行测试..

Firefox 22
Google Chrome 28
Internet Explorer 10
Safari 5
Opera 15

#text_container {
  padding: 1px;
  /*To make sure that the input and the label will not overlap the border, If you remove this line it will not display correctly on Opera 15.0*/
  border: 1px solid activeborder;
  /*Create our fake border :D*/
}

#text_container>label {
  color: activeborder;
  background-color: white;
  -webkit-touch-callout: none;
  /*Make the label text unselectable*/
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#text_container>input {
  border: none;
  /*We have our fake border already :D*/
}

<span id="text_container">
  <!-- Don't break the following line to avoid any gaps between the label text and the input text -->
  <label>http://www.</label><input type="text" />
     </span>

- Helmyano

---

这个不再起作用了。 - mplungjan

Answer 4

var requiredText = 'https://';
$('#site').on('input', function() {
  if (String($(this).val()).indexOf(requiredText) == -1) {
    $(this).val(requiredText);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="site" />

- Eduardo de Souza

---

只有这个答案符合我的需求。+1 - keinabel

Answer 5

你也可以使用Bootstrap来完成它：

div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>

你可以在这里检查。(检查用户名字段)

- Prateek Gupta

Answer 6

将文本绝对定位于字段开头，然后向字段添加左填充，直到光标对齐到正确位置。请参见此处的示例： http://www.accessfinancialservices.co.uk/calculators/mortgage-calculator/

- matpol

---

是的，文本必须在输入中，文本的第一部分是固定的，但用户可以在固定文本后添加一些文本。 - Brahim

在后端完成还是在表单提交后使用JS完成？ - matpol

虽然这个回答在2013年理论上可以回答问题，但最好在此处包含答案的基本部分，并提供参考链接。特别是现在该链接已经失效。 - mplungjan

Answer 7

只需使用 placeholder="姓名" 例如：

- name

---

占位符属性不是固定的，当您输入时，它会用您键入的文本替换占位符。 - Nicholas