用jq设置表单中的输入框占位符效果(兼容IE7以上)

input 中的 placeholder 属性规定可描述输入字段预期值的简短的提示信息,该提示会在用户输入值之前显示在输入字段中。注意:Internet Explorer 9 及之前的版本不支持 标签的 placeholder 属性。

输入框占位符效果,这是我经常在工作中需要兼容到IE7以上的专题页面遇到的问题,现在把它记录下来,方便大家作为参考吧~

/*设置输入框占位符效果*/

  //获得焦点的时候,占位符为空,输入框的字体颜色为#000
  function input_focus(inputName, inputValue) {
    $(inputName).on('focus', function () {
        var value_name = $(this).attr('value');
        if (value_name == inputValue) {
            $(this).attr('value', '');
        }
        $(this).css('color', '#000');
    });
  }
  //失去焦点的时候,如果输入框为空,则显示占位符,占位符颜色为:#aaa
  function input_blur(inputName, inputValue) {
    $(inputName).on('blur', function () {
      var value_name = $(this).attr('value');
      if (value_name != '') 
        return;
      } else {
        $(this).css('color', '#aaa');
        $(this).attr('value', inputValue);
      }
    });
  }

  //以下是调用方法,里面的内容可以具体的修改
  input_focus('#class_name', '请填写您的姓名');
  input_focus('#class_phone', '请填写您的联系方式');
  input_focus('#class_code', '请填写您的短信验证码');
  input_blur('#class_name', '请填写您的姓名');
  input_blur('#class_phone', '请填写您的联系方式');
  input_blur('#class_code', '请填写您的短信验证码');

这里写图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值