Question

我在输入顶部使用水印文本定位跨度时遇到了麻烦。使用GWT + uibinder的代码如下：

并转换为html看起来像：

而不是将跨度重叠在输入字段的顶部，方法是将其浮动到左侧：

|----------------------------------|
|                |------------||--||
|                |passwd      ||Go||
|                |------------||--||
|                                  |
|----------------------------------|

我在输入后得到它

|----------------------------------|
|          |------------|      |--||
|          |            |passwd|Go||
|          |------------|      |--||
|                                  |
|----------------------------------|

或在下一行中，如果我尝试相对于输入的宽度定位跨度

|----------------------------------|
|                |------------||--||
|                |            ||Go||
|                |------------||--||
|                 passwd           |
|----------------------------------|

关于如何解决它的任何想法？提前谢谢。

Answer 1

检查这个小提琴，它是使用绝对定位。 http://jsfiddle.net/ajMWd/1/

编辑只是另一个版本做同样的事情http://jsfiddle.net/ajMWd/2/

Answer 2

如果您现在的问题是要在密码框中显示默认文本，但密码默认文本不可读，则需要在用户输入数据之前将密码输入更改为普通文本输入。

在JavaScript中，您可以使用焦点事件将其更改回密码类型输入。

尝试这样的事情：

<head>
   <script type="text/javascript">
      function changeToPassword() {
         document.getElementById("passwordSpan")
            .innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>";
         document.getElementById("passwd").focus();
      }
   </script>
</head>
<body>
   <form>
      <span id="passwordSpan">
         <input onfocus="return changeToPassword()" id="passwd" name="passwd" type="text" value="Type Password" />
      </span>
   </form>
</body>

Answer 3

我已经能够使用here中的一个很好的解决方案来解决它。诀窍是使用相对位置样式和密码箱标记容器，并使用绝对标记标记其范围。它无需指定任何位置即可工作！（虽然我还没试过IE） http://jsfiddle.net/ajMWd/4/

在页面右边缘重叠div

3 个答案: