有contenteditable属性的容器,单击后选中全部文本,然后编辑

怎样实现单击后选中全部文本?

阅读 4.3k
评论 更新于 2016-12-20
    3 个回答
    弱鸡
    • 250

    stackoverflow找到了解决的办法,selectNodeContents对具有contenteditable='true'的容器有效

        <div contenteditable='true' id="selectable" onclick="selectText('selectable')">http://example.com/page.htm</div>
        
        <script type="text/javascript">
            function selectText(containerid) {
                if (document.selection) {
                    var range = document.body.createTextRange();
                    range.moveToElementText(document.getElementById(containerid));
                    range.select();
                } else if (window.getSelection) {
                    var range = document.createRange();
                    range.selectNodeContents(document.getElementById(containerid));
                    window.getSelection().removeAllRanges();
                    window.getSelection().addRange(range);
                }
            }
        </script>
    评论 赞赏 2016-12-20

      两种思路,第一种,在div内嵌套一个没有边框的input或者textarea,接下来的就是样式调整,让用户看起来,就是一个普通的输入框(我实在想不出有什么意义),即不用contenteditable属性。
      第二种,一定要用contenteditable属性的div来做输入框,然后在其内部定位一个span标签,该标签的样式为仿照文字选中的背景色,宽度默认为0,高度和行高要和文字大小一样,默认隐藏,且放在文字下方(z-index设置,这就意味着你输入框div不能有背景色),点击输入框,触发事件然后js动态修改它的宽度并显示。
      以上两种我推荐第一种,为什么说呢,你用div+contenteditable不就是为了避免input的某些默认的蛋疼样式吗,这种移花接木的方式,既能活动Input的一些默认样式,还能设置自己的样式再div上(毕竟div才是显现的那个框)。如果你两种都看不上,那你就用input或者放弃这坑爹的需求吧(毕竟除了没那选中的背景色之外,你获取输入内容,焦点事件都是一样一样的,你得原谅这是个H5的新属性,新得有缺陷嘛),否则你就别想了,如果你 真有好的解决方法,望楼主能不吝贴出来...让我也涨涨见识

      评论 赞赏 2016-12-20
        鱼慢慢慢
        • 0
        • 新人请关照

        document.getElementById("id").select();
        或者用jQuery
        $("#id").select();

        评论 赞赏 2016-12-20
          撰写回答

          登录后参与交流、获取后续更新提醒