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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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