实现placeholder兼容各浏览器代码,Js代码库,德仔网

代码语言

代码分类

【Js】实现placeholder兼容各浏览器

作者:欣雨 / 发布于2016/8/15/ 646

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">  
    <meta name="renderer" content="webkit">  
    <title>demo</title>  
    <script src="js/jquery-1.11.3.min.js"></script>  
    <style>  
        * {margin: 0; padding: 0;}  
        label {position: absolute; top: 0; left: 0; color: #666; cursor: text;}  
    </style>  
</head>  
<body>  
      
    <div class="ctn">  
        <input id="iTitle" type="text" placeholder="请在这里输入标题">  
        <label for="iTitle">请在这里输入标题</label>  
        <span>0/10</span>  
    </div>  
                              
    <script>  
  
        ;$(function() {  
  
              
            //iTitle  
            var $input1 = $('#iTitle'),  
                $tip1 = $('.ctn label'),  
                $word1 = $('.ctn span');  
              
  
            //判断类型  
            var isIE = false,  
                browser = myBrowser();  
  
            if (browser == "IE") {  
                isIE = true;  
                $tip1.show();  
            }else {  
                isIE = false;  
                $tip1.hide();  
            }  
  
              
  
  
            //键盘事件  
            $(document).on('keyup', function() {  
                remainWord($input1, $tip1, $word1);  
            });  
  
            //键盘事件  
            $input1.on('focus blur', function(e) {  
                if(isIE && !$(this).val()) {  
                    if(e.type == 'focus') {  
                        $tip1.hide();  
                    }else {  
                        $tip1.show();  
                    }  
                }  
                  
            });  
              
  
  
  
            /*******************/  
  
            //计算字数  
            function remainWord($input, $tip, $word) {  
                var nowNum = 0,  
                    maxNum = $word.text().match(/\d+/g)[1],  
                    word = $input.val(),  
                    len = word.toString().length;  
  
                $word.text(len +'/'+ maxNum);  
  
                if(len > maxNum) {  
                    $word.css({'color': 'red'});  
                }else {  
                    $word.removeAttr('style');  
                }  
            }  
  
            //判断浏览器类型  
            function myBrowser(){  
                var userAgent = navigator.userAgent,  
                    isOpera = userAgent.indexOf("Opera") > -1;  
  
                if (isOpera) {  
                    return "Opera";  
                };  
                if (userAgent.indexOf("Firefox") > -1) {  
                    return "FF";  
                }  
                if (userAgent.indexOf("Chrome") > -1){  
                    return "Chrome";  
                }  
                if (userAgent.indexOf("Safari") > -1) {  
                    return "Safari";  
                }  
                if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {  
                    return "IE";  
                };  
            }  
  
        });  
    </script>  
  
  
      
</body>  
</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　placeholder　

同语言下

可能有用的

欣雨贡献的其它代码(10)