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

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

阅读 5.4k
评论
    3 个回答

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