zoukankan      html  css  js  c++  java
  • textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标

    1.textarea自适应高度,placeholder使用图标

        自适应高度,有很多种办法:

        1)jq:

    $("textarea").on("input",function(){
        $(this).css({              
            'height':'auto',
            'overflow-y':'hidden'        
        }).height(this.scrollHeight);
    })

        效果图:

        

        2)使用插件:autosizeflexText等。。。插件肯定比一两句话的jq强大的多,或者是:这篇文章

       1.1 textarea的placeholder使用图标:

        只要在placeholder加入unicode编码的图标就行了。比如:

        我下载了iconfont图标,下载下来之后,引入iconfont.css文件,然后在palceholder里面加入对应的unicode编码:

    <textarea class="iconfont" name="" placeholder="&#xe69a 我是palceholder"></textarea>

        效果:

        

    2.div模仿textarea可编辑的功能。

        在div,p等标签中加入 contenteditable="true" ,这个属性,不要="true"也可以,就能实现可编辑的功能。

        兼容ios的方法:加个 -webkit-user-select:text 属性就可以了

        ios中如果光标不移动:加个 -webkit-user-select:auto; 

        效果:

         

       2.1模仿placeholder的功能

        直接在div上加placeholder肯定不行,所以,只能模仿。在div上加一个class,然后设置这个class的after伪元素的content为你想要的palceholder的值就可以了。

        比如:

         <div class="box place iconfont" contenteditable="true" ></div> 

        效果:

        

        e69a  是我下载的iconfont图标的content值。这样就可以使用图标了。。。

        那么模仿了placeholder之后怎样实现它的效果呢?

        这就很简单了:思路是:及时获取当前div的text值的长度,如果大于0,就removeclass有content的那个class名,如上就是place这个class;否则就addClass。

        那么问题又来了,怎样及时获取当前div的text长度呢,我用了这个:

    $(".box").on("input propertychange",function(){
        var len=$(this).text().length;
        if(len>0){
            $(this).removeClass("place");
        }else{
            $(this).addClass("place");
        }
    })

        对,就是这个input propertychange。。。。。结果这里也能用,我也是大吃一惊。。。。。。

        最后效果:

        

        兼容性没有具体测,但是在火狐和Safari会出现奇怪的现象:

        

        它自己无缘无故就在div加了个<br >

        

        这个bug没想到解决的办法。。。

        

  • 相关阅读:
    Java实现 LeetCode 343 整数拆分(动态规划入门经典)
    Java实现 LeetCode 342 4的幂
    Java实现 LeetCode 342 4的幂
    Java实现 LeetCode 342 4的幂
    Java实现 LeetCode 341 扁平化嵌套列表迭代器
    Java实现 LeetCode 341 扁平化嵌套列表迭代器
    Java实现 LeetCode 341 扁平化嵌套列表迭代器
    Java实现 LeetCode 338 比特位计数
    H264(NAL简介与I帧判断)
    分享一段H264视频和AAC音频的RTP封包代码
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/8352503.html
Copyright © 2011-2022 走看看