overlapping divs on the right edge of the page

2019-08-08 14:37发布

站内问答 / HTML/CSS
678 3 4

I am having troubles for positioning a span with the watermark text on top of an input. The code using GWT+uibinder looks like that:

http://jsfiddle.net/camposcarlos/dMzL4/

and transformed into html looks like that:

http://jsfiddle.net/ajMWd/

instead of having the span overlapped on top of the input field by floating it to the left:

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

I get it after the input

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

or in the next line if I try to position the span relative to the width of the input 

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

Any ideas on how to solve it? Thanks in advance.

3条回答
男人必须洒脱
2楼-- · 2019-08-08 15:12

Check this fiddle, it's using absolute positioning. http://jsfiddle.net/ajMWd/1/

edit Just another version doing the same thing http://jsfiddle.net/ajMWd/2/

查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
3楼-- · 2019-08-08 15:16

If your problem is now that you want to display default text in a password box, but the password default text is unreadable, you will need to change your password input to be a normal text input before the user enters data.

Than, in your JavaScript, you can use the focus event to change it back to being a password-type input.

Try something like this:

<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>
查看更多
0人赞 添加讨论(0) 举报
Evening l夕情丶
4楼-- · 2019-08-08 15:27

I have been able to solve it using a nice solution from here. The trick was to tag the container with a relative position style and the passwordbox and its span with absolute tags. It works with no need of specifying any position! (although I haven't tried with IE yet) http://jsfiddle.net/ajMWd/4/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)