V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
zhlzh
V2EX  ›  JavaScript

登录界面 input,鼠标 focus 隐藏提示文字, blur 显示提示文字, ipnut 输入文字后不显示提示文字。

  •  
  •   zhlzh · 2015-01-27 22:47:29 +08:00 · 3060 次点击
    这是一个创建于 3590 天前的主题,其中的信息可能已经有所发展或是发生改变。
    需求:
    登录界面input,鼠标focus隐藏提示文字,blur显示提示文字,ipnut输入文字后不显示提示文字。
    问题:ie6 无法更改input的type值。
    解决方案:
    html:
    <div class="login-ipt-text1">请输入用户名</div>
    <div class="login-ipt-text2">请输入密码</div>
    <input type="text" value="" class="login-ipt1">
    <input type="password" value="" class="login-ipt2">
    css:
    .login-ipt-text1 { position: absolute; top: 173px; left: 37px; width: 167px; height: 43px; background: transparent; border: none; color: #CCC; line-height: 46px; padding-left: 60px; }
    .login-ipt-text2 { position: absolute; top: 173px; left: 261px; width: 152px; height: 43px; background: transparent; border: none; color: #CCC; line-height: 46px; padding-left: 60px; }
    .login-ipt1 { position: absolute; top: 173px; left: 37px; width: 167px; height: 43px; background: transparent; border: none; color: #CCC; line-height: 46px; padding-left: 60px; }
    .login-ipt2 { position: absolute; top: 173px; left: 261px; width: 152px; height: 43px; background: transparent; border: none; color: #CCC; line-height: 46px; padding-left: 60px; }
    .non { display:none; }
    js:
    (function () {
    var txt1 = $('.login-ipt-text1'),
    txt2 = $('.login-ipt-text2');
    $('.login-ipt1, .login-ipt2').focus(function () {
    var obj = $(this);
    if (obj.hasClass('login-ipt1')) {
    txt1.addClass('non');
    } else {
    txt2.addClass('non');
    }
    }).blur(function () {
    var obj = $(this);
    if (obj.val() === '') {
    if (obj.hasClass('login-ipt1')) {
    txt1.removeClass('non');
    } else {
    txt2.removeClass('non');
    }
    }
    });
    }());
    9 条回复    2015-01-28 16:10:18 +08:00
    Kilerd
        1
    Kilerd  
       2015-01-28 02:18:45 +08:00 via Android
    html5+拒绝IE6,可以满足需求,
    Delbert
        2
    Delbert  
       2015-01-28 07:15:32 +08:00
    为啥要改变type?
    可以用placeholder实现。
    我自己是通过JS实现的。
    onfocus时如果value与预定义的值相等,则value清空。
    onblur时判断value是否为空,为空则用预定义的填充。
    Delbert
        3
    Delbert  
       2015-01-28 07:19:37 +08:00
    楼主,如果你除了这个用不到jQ,没必要引入的啊。
    zhlzh
        4
    zhlzh  
    OP
       2015-01-28 09:09:00 +08:00
    @Delbert , 1. 改变type为text是为了显示提示信息时password input不至于显示*****;2. placeholder 是html5,而很多项目客户还是要求支持IE6的;3. 这段代码是节选,整个代码中许多地方要用jQuery;4. 高版本IE及规范浏览器是可以改type的。
    cxe2v
        5
    cxe2v  
       2015-01-28 09:21:28 +08:00
    有个jquery.placeholder插件,或者你可以自己写个JS代码兼容不支持plachholder的浏览器
    crs0910
        6
    crs0910  
       2015-01-28 10:03:35 +08:00
    @zhlzh 不要用背景透明,改用z-index让文字在input上面,然后给文字加点击事件触发input的focus。
    zhlzh
        7
    zhlzh  
    OP
       2015-01-28 10:11:10 +08:00
    @cxe2v 这个实用,平时插件用得少>_<|||
    zhlzh
        8
    zhlzh  
    OP
       2015-01-28 10:12:05 +08:00
    @crs0910 input后面还有图~~~
    Delbert
        9
    Delbert  
       2015-01-28 16:10:18 +08:00
    @zhlzh 好吧,这个倒是没想过……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1000 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 21:27 · PVG 05:27 · LAX 13:27 · JFK 16:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.