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

问题描述

问 题

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

解决方案

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

这篇关于javascript - 有contenteditable属性的容器，单击后选中全部文本，然后编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！