textarea在ie中focus不起作用

秒速五厘米 2022-08-06 10:10 217阅读 0赞

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

![复制代码][copycode.gif]

<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>

![复制代码][copycode.gif]

想要的效果是直接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

[copycode.gif]: /images/20220806/c28355a24c904cd48e86ccf0e1eb91fd.png