Question

想知道这是否可能：

假设我有一个文本输入元素，我想用它来输入货币。可能我想在文本输入之前使用前缀来指示用户正在执行输入的货币。

因此，HTML看起来像：

US$ <input type="text" />

但是，假设我希望上面的“US $”在文本输入本身中显示为 in 前缀，而“US $”不是输入字符串的一部分。像“US $”这样的地方是文本输入的背景文本。当然，文本输入将缩进以避免与背景文本冲突。

在没有使用图片或Javascript的情况下完成此任何方法？

谢谢！

Answer 1

我没有时间在IE中尝试我的解决方案（现在就开始工作），但如果你愿意的话，你可以玩这个：http://pastie.org/581472

更新：快速查看IE6-8，它在任何一个中都无效。不确定它是否是HTML5文档或其他内容的原因，我将在今天或明天稍后再看一下。

更新2：更新了代码以使用FF 3.5，Opera 9，Safari 4，IE6-8（可能更多和更早版本，但未经过测试）。 Grab the updated code

<!doctype html>
<title>Background text inside text input control</title>

<style>
    form { position: relative; }
    input { background: transparent; position: relative; text-indent: 28px; z-index: 2; }
    span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; z-index: 1; }
</style>

<form action="" method="post">
    <input type="text">
    <span>US$</span>
</form>

更新的代码：

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Background text inside text input control</title>
    <style>
        form { position: relative; }
        input { padding-left: 28px; }
        span { color: #999; font-size: 14px; left: 5px; position: absolute; top: 3px; }
    </style>
  </head>
  <body>
    <form action="" method="post">
      <input type="text">
      <span>US$</span>
    </form>
  </body>
</html>

Answer 2

如果您真的想，可以执行以下操作：

1。）从定义如下的字段开始：

<div class="moneyFieldHolder">
    <input type="text" class="moneyField" />
</div>

2。）创建一个文本框的背景图片，其中包含US $：

----------------
|US$           |
----------------

3.。）设置CSS：

.moneyFieldHolder {
    background: url(image.png) top left;    
}

.moneyField {
    border: 0px solid #FFFFFF;
    margin-left: 4em;
}

就是这样......这绝对是一个hacky解决方案，只有在绝对必要时才能真正使用。此外，这当然 - 需要一个图像。

Answer 3

我认为你可以使用具有透明bg的绝对定位div来做到这一点。或者，您可能会成功拦截每次击键并更新自己显示的内容。

文本背景的CSS在文本输入元素

3 个答案: