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

Question

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

7

想知道这是否可能：

假设我有一个文本输入元素，我想用它来输入货币。可能我想在文本输入框前面加上一个前缀，以指示用户正在进行输入的货币。

因此，HTML看起来会像这样：

US$ <input type="text" />

但是，假设我希望“US$”出现在文本输入框内部作为前缀，而不是作为输入字符串的一部分。就像“US$”是文本输入框的背景文本一样。当然，为了避免与背景文本冲突，文本输入框会缩进。

有没有办法在不使用图像或JavaScript的情况下实现这一点呢？

谢谢！

- feicipet

3个回答

3

如果你真的想要，可以按照以下步骤操作：

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

就是这样了……这绝对是一种不太正规的解决方案，只有在绝对必要时才应该使用。此外，这当然需要一张图片。

- Zack Marrapese

为了进一步完善这个黑客行为，你还需要在 div 上添加一个 onfocus 事件，以便在单击时正确地将焦点设置到输入字段上。 - Pat

这是在Stack Overflow上用于搜索框的解决方案，例如。请使用Firebug查看http://getfirebug.com/上的搜索框。 - Wesley

嗯，对于搜索框来说，一个 b/g 图像已经足够好了，但是对于货币输入框来说，可能会有太多的可能值，使得为世界上每一种货币创建图像都不可行。因此，这种解决方案在货币情境下并不实用。但是，嘿，这个 hack 真的很酷！ :) - feicipet

0

我认为您可以使用一个具有透明背景的绝对定位div来完成此操作。另外，您也可以拦截每个按键并自己更新显示内容来获得一些成功的结果。

- Scott Evernden

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Teddy Zetterlund · Accepted Answer

我没有时间在IE中尝试我的解决方案（现在要离开工作了），但如果你想的话，可以尝试一下：http://pastie.org/581472

更新：快速查看了IE6-8，它们都不起作用。不确定是因为最小化的HTML5文档还是其他原因，我稍后今天或明天再看一下。

更新2：更新了代码，可以与FF 3.5、Opera 9、Safari 4、IE6-8（可能还有更多和早期版本，但未经测试）一起使用。获取更新的代码。

<!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>