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

弱鸡
  • 250

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

回复
阅读 6.2k
3 个回答
✓ 已被采纳

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>

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

鱼慢慢慢
  • 0
新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏