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

来源:互联网 发布:快速阅读软件下载 编辑:程序博客网 时间:2024/05/26 12:06

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 0
原创粉丝点击