Bsxwx_
Bsxwx_
2017-06-06 03:03
采纳率: 63.6%
浏览 2.2k

html 的样式 关于设计密码框的

我想实现这样的效果 有个密码框 透明 不会覆盖掉背景图片 密码框有提示: 请输入密码 鼠标点击一下 消失 鼠标移走 提示出来 就是这样的效果 css做的到么 提交按钮可以做的透明的效果么 有会的话 希望给我点帮助 查了好久 都没实现这种效果 如果我讲的不详细 可以加我qq1306671351 谢谢 。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

7条回答 默认 最新

  • u014292161
    前端○萌妹 2017-06-06 06:04
    已采纳

    直接用获得焦点和失去焦点呗,代码如下

     <label>用户名<input id="pass" type="text" placeholder="请输入密码"></label>
     <script type="text/javascript">
            $('#pass').focus(function(){
                $(this).attr("placeholder","");
            })
            $('#pass').blur(function(){
                $(this).attr("placeholder","请输入密码");
            })
    
        </script>
    
    点赞 评论
  • weixin_38653288
    weixin_38653288 2017-06-06 03:14

    你这个解释不太清楚,不过这个 请输入密码 鼠标点击一下 消失 鼠标移走 提示出来 就是这样的效果很简单placeholder属性就行,透明度 opacity就行

    点赞 评论
  • wodewojueding
    wodewojueding 2017-06-06 03:20

    鼠标点的时候把这个属性placeholder去掉不就好了

    点赞 评论
  • wodewojueding
    wodewojueding 2017-06-06 03:25

    《input type="password" placeholder="enter password" id="txtPwd" /》

    $("#txtPwd").click(function(){
    $(this).removeAttr('placeholder');
    })

    
    
    点赞 评论
  • Joel_h
    Joel_h 2017-06-06 03:56

    图片说明

    点赞 评论
  • HcJsJqJSSM
    大道之简 2017-06-06 04:49

    <!DOCTYPE html>



    测试Input
    <br> *{<br> margin:0;<br> padding:0;<br> }<br> hr{<br> color:red;<br> }<br> input{<br> border:3px solid cadetblue;<br> border-radius:5px;<br> }<br>

    <br> $(function(){<br> $(&quot;#pass&quot;).click(function(){<br> if(this.value==this.defaultValue){<br> this.value=&quot;&quot;;<br> }<br> });<br> $(&quot;#pass&quot;).blur(function(){<br> if(this.value==&quot;&quot;){<br> this.value=this.defaultValue;<br> }<br> });<br> });<br>











    用户名称: 




    对input文本框加个点击事件,使用Jquary和之前的默认值比较,鼠标离开就添加一个失去焦点的函数,就显示input的默认值就可以了吧。
    点赞 评论
  • HcJsJqJSSM
    大道之简 2017-06-06 05:03

    <!DOCTYPE html>



    测试Input
    <br> *{<br> margin:0;<br> padding:0;<br> }<br> hr{<br> color:red;<br> }<br> input{<br> border:3px solid cadetblue;<br> border-radius:5px;<br> }<br>

    <br> $(function(){<br> $(&quot;#pass&quot;).click(function(){<br> if(this.value==this.defaultValue){<br> this.value=&quot;&quot;;<br> }<br> });<br> $(&quot;#pass&quot;).blur(function(){<br> if(this.value==&quot;&quot;){<br> this.value=this.defaultValue;<br> }<br> });<br> $(&quot;#password&quot;).click(function(){<br> $(this).removeAttr(&quot;placeholder&quot;);<br> });<br> $(&quot;#password&quot;).blur(function(){<br> $(this).attr(&quot;placeholder&quot;,&quot;输入你的密码&quot;);<br> });<br> });<br>











    用户名称: 




    用户密码: 





    这是两种方式的分别以用户名的text和type=password的做了一下,刚才那个不太清楚,这个你看看可以用吗?
    点赞 评论

相关推荐