记录Js 文本框验证 与 IE兼容性

最近的日常就是将测试小姐姐提交的bug进行修改，想来这种事情还是比较好开展的，毕竟此项目已上线一年多，现在只是一些前端的问题需要改正。实际上手的时候并不是这样，原项目是在谷歌上运行，后来由于要新增一个仅支持32位IE8流媒体播放器，便成了在IE上跑，大部分都有平稳退化，不会影响正常使用，但是对于那些不兼容的方法就比较尴尬了，IE8的下的F12 感觉是无效的，单击选择元素10下，有8下没有效果，每次只能先用谷歌定位到元素，然后在IE下依次展开点选，每每切换，着实费时费事。 现记录下常用的场景

① 文本框验证：

db中规定某字段长度为50，界面对应的文本框需要下验证，直接设置maxlength='50' 是不合理的，比如输入50个文字，其文本框的length 是50，但是保存到数据库表时，就是50*2，毕竟一个文字占用两个长度

这样的话，写一个函数，用正则识别汉字个数，然后  (val总长度-汉字的个数）+汉字个数*2 = 实际长度

        var testLenth = function ($txt) {

            var intb = $txt.val();

            re = /[\u4E00-\u9FA5]/g;
            var zwlenth = 0;
            if (re.test(intb)) {
                zwlenth = intb.match(re).length * 2 + intb.length - intb.match(re).length;
                return zwlenth;
            }
            else {
                return intb.length;
            }

        }

② 操作父节点

当父节点下的子节点中存在文字、图片时，直接设置父节点长度为0 对IE是无效果的，IE中默认文字大小是30px，所以解决方案有二：

其一 先获取子节点对象，然后将其文字大小设置为 0，然后再设置父节点高度为 0

其二 先隐藏子节点对象，然后再设置父节点高度 （PS：这里要使用动画效果，所以需要设置下高度）

③ 绑定事件

绑定事件时，如果情景合理，尽量使用bind去取代on，bind对 jq 的版本兼容性强于 on

1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；
2.bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以
　用来代替live()函数，live()函数在1.9版本已经删除；

3.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些，想了解具体情况，请戳这：
　http://kb.cnblogs.com/page/94469/

4.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；　

④ webuploader.js 插件的引用

点击上传按钮，界面无响应，按照网上各种说法，增加 <meta>标签；确定swf 路径之类的，后来发现对于IE8来说，本地的 flash 版本一定要升级到位

⑤ 上传图片，预览的时候，凡是图片超过20K，都只显示一小部分，无法显示完全，这种情况可以调整 缩略图配置

            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || ,

            // 缩略图大小
            thumbnailWidth = *ratio;//110 * ratio,
            thumbnailHeight = *ratio;//110 * ratio,

⑥ 下拉列表联动时，div 遮挡正文

这种情况下最快捷的方法就是设置 div的层优先级，添加 z-index 属性，前提是 两元素的必须保证有 position属性值

⑦ 一些其他的bug，由于时间问题，一般处理方法是，重新挖一个坑，然后放进去，埋上