input placeholder兼容ie10以下

代码如下:

 if( /msie/.test(navigator.userAgent.toLowerCase()) && $.browser.version.slice(0,3) < 10) {
        $(‘input[placeholder]‘).each(function(){ 

        var input = $(this);       

        $(input).val(input.attr(‘placeholder‘));

        $(input).focus(function(){
             if (input.val() == input.attr(‘placeholder‘)) {
                 input.val(‘‘);
             }
        });

        $(input).blur(function(){
            if (input.val() == ‘‘ || input.val() == input.attr(‘placeholder‘)) {
                input.val(input.attr(‘placeholder‘));
            }
            });
        });
      }    

其中

$.brower.msie =  /msie/.test(navigator.userAgent.toLowerCase())  //$.brower jquery1.90以上被去除

Jquery 1.9.0 以上版本 扩展使用 $.browser 方法

由于jQuery 1.9.0 以上版本 jquery去掉了对 $.browser 的支持,采用$.support 来判断浏览器类型。导致之前的很多插件报错

"Uncaught TypeError: Cannot read property ‘msie‘ of undefined".

网上有很多解决办法如:

判断浏览器类型:

[html] view plain copy

  1. <span style="white-space:pre">    </span>$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
  2. $.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
  3. $.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
  4. $.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());

号后面的表达式返回的就是 true/false, 可以直接用来替换原来的 $.browser.msie 等。

检查是否为 IE6:// Old

[html] view plain copy

  1. <span style="white-space:pre">    </span>if ($.browser.msie && 7 > $.browser.version) {}
 // New

[html] view plain copy

  1. <span style="white-space:pre">    </span>if (‘undefined‘ == typeof(document.body.style.maxHeight)) {}
 检查是否为 IE 6-8:

[html] view plain copy

  1. <span style="white-space:pre">    </span>if (!$.support.leadingWhitespace) {}

**************************************************************************

下面  我们采取的思路是 使用jquery的继承机制 对jquery 1.11.1版本 进行扩展 使其支持 $.browser 方法,已达到兼容之前组件的目的.

[html] view plain copy

  1. jQuery.extend({
  2. browser: function()
  3. {
  4. var
  5. rwebkit = /(webkit)\/([\w.]+)/,
  6. ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
  7. rmsie = /(msie) ([\w.]+)/,
  8. rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
  9. browser = {},
  10. ua = window.navigator.userAgent,
  11. browserMatch = uaMatch(ua);
  12. if (browserMatch.browser) {
  13. browser[browserMatch.browser] = true;
  14. browser.version = browserMatch.version;
  15. }
  16. return { browser: browser };
  17. },
  18. });
  19. function uaMatch(ua)
  20. {
  21. ua = ua.toLowerCase();
  22. var match = rwebkit.exec(ua)
  23. || ropera.exec(ua)
  24. || rmsie.exec(ua)
  25. || ua.indexOf("compatible") < 0 && rmozilla.exec(ua)
  26. || [];
  27. return {
  28. browser : match[1] || "",
  29. version : match[2] || "0"
  30. };
  31. }
将以上代码 保存成 jquery-browser.js 使用即可。
时间: 2024-10-06 14:45:16

input placeholder兼容ie10以下的相关文章

input placeholder 兼容问题

placeholder是html5出的新特性,ie9以下是不兼容的, 那么为了兼容ie9  我们需要对他做处理 //jq的处理方式$(function(){ jQuery('[placeholder]').focus(function() { var input = jQuery(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).

兼容ie10以下版本的placeholder属性

<script src="${ctx }/js/jquery.placeholder.js" type="text/javascript"></script> $(function() { $('input').placeholder();//兼容ie10下placeholder属性: }); js文件地址

IE9以下 placeholder兼容

//input placeholder兼容!(function ($, doc, win) { $.fn.placeholder = function () { var i = doc.createElement('input'), placeholdersupport = 'placeholder' in i; if (!placeholdersupport) { var inputs = $(this); inputs.each(function () { var input = $(thi

改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的解释: <input id="itxt" class="itext" type="text" title="这是一个文本框" value="点我输入内容" tabindex="1" m

完美让IE兼容input placeholder属性的jquery实现

调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:12 */ (function ($) { //判断是否支持placeholder function isPlaceholer() { var input = document.createElement("input"); return "placeholder" in

placeholder 兼容 IE

placeholder 是 html5 的新属性,仅支持 html5 的浏览器才支持 placeholder,目前最新的 FF.Chrome.Safari.Opera 以及 IE10 都支持,IE6-IE9 都不支持! placeholder 在各个浏览器下基本都是淡灰色显示,不同的地方在于 FF 和 Chrome 中,输入框获得焦点时,placeholder 文字没有变化,只有当输入框中输入了内容时,placeholder 文字才会消失:而在 Safari 和 IE10 下,当输入框获得焦点时

placeholder兼容

<!------------placeholder兼容-------------><script type="text/javascript">    $(function () {        if (!placeholderSupport()) {   // 判断浏览器是否支持 placeholder            $('[placeholder]').focus(function () {                var input = $

使用CSS修改HTML5 input placeholder颜色

问题没有实际价值,缺少关键内容,没有改进余地 Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS input[placeholder], [placeholder], *[placeholder] { color:red !important; } HTML <input type="text" placeholder="Value" /> 运行结果值还是灰色,Color:red没有作用.有什么方法可以修

用css修改HTML5 input placeholder颜色

使用CSS修改HTML5 input placeholder颜色 本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和了解国外最新技术.本文将为读者讲解HTML5 Input Placeholder Color的个性化设定,需要针对不同浏览器内核来编程. 问题: David Murdoch:Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS input[placeh