textarea在ie中focus不起作用

由于兼容性没有考虑周全，今天遇到了这个问题：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10" readOnly=true>sdfasdfadsfasdf</textarea>
    <script src="jquery-1.9.1.js"></script>
    <script type="text/javascript">
            $(function(){ 
                $('textarea').on('click',function(){ 
                        //$(this).attr('readOnly',false);
                        $(this).css('background-color','transparent')
                        var $textarea=$(this);
                        /**    setTimeout(function(){
                                $textarea.focus();
                                    }, 0);  **/
                        $(this).attr('contentEditable',true);
                        //$(this).focus();
                 });
                $('textarea').on('blur',function(){ 
                        $(this).attr('readOnly',true);
                        $(this).css('background-color','#666')
                 });

            });

    </script>
</body>
</html>

想要的效果是直接click就可以获取光标并且输入字符,在textarea里面.无奈focus在ie中不起效果.到处找,还是在强大的stackoverflow上面发现了答案.

第一种：直接使用 select()方法不用focus() 但是交互性严重有问题。

第二种：stackoverflow上面有一种解决方法是用了上面注释的 setTimeout事件，我尝试了,不起效果。【成功的朋友麻烦不灵赐教】

第三种: 仍然是在stackoverflow，上面提问者最后使用的是$(this).attr('contentEditable',true); contentEditable这个属性，能够实现这效果.但是只在ie中有效,这个做特殊处理即可。这应该是最好的解决办法了. 很抱歉关于这一点我来公司尝试了 firefox 和chrome 都可以，但是在自己的电脑上没有尝试成功,大家自己看一下自己的情况酌情处理吧。

stackoverflow 链接：

http://stackoverflow.com/questions/9806910/textarea-is-not-editable-not-readonly-in-ie

http://stackoverflow.com/questions/3764440/ie-readonly-textarea-problem

posted on 2015-01-12 21:04 狂奔的冬瓜阅读(278) 评论(0) 编辑收藏举报