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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值