zoukankan      html  css  js  c++  java
  • div contenteditable placeholder

    contenteditable型的编辑框,实现placeholder的方式有两种

    第一种,Css的实现方式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .content{
    width:380px;
    height:50px;
    border:1px solid #e1e1e1;
    -webkit-user-modify:read-write-plaintext-only;
    }
    .text:empty:before{content: attr(placeholder);color:#bbb;}
    .text:focus{content:none;}
    
    </style>
    </head>
    <body>
    <div class="content text" contenteditable="true" placeholder="你想说什么"></div>
    </body>
    </html>


    但是,这种方式存在一个漏洞或问题:如果在编辑框里直接回车,然后再删除,就不会再出现placeholder里的提示内容了、经过分析,发现回车的时候会在

    <div class="content text" contenteditable="true" placeholder="你想说什么"></div>添加内容。

    如果加了 -webkit-user-modify:read-write-plaintext-only;则增加两个<br/>标签

    否则加了两个<div><br/></div>标签。

    当增加的是两个<br/>标签,删除只能删除一个标签,余下一个标签,导致empty判断为false。

    当增加的是两个<div><br/></div>标签,多按一次删除还是可以出现提示文字,但是用户体验就不佳了。

    这里确实很疑惑。毕竟我只敲了一次回车键,为啥会出现两个标签。只有第一次回车键才会出现该情况。往后就正常了、

    所以,最终采用了第二种方式。去判断了多余的未删掉的一个标签。

    第二种,Js的实现方式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .content{
    width:380px;
    height:50px;
    border:1px solid #e1e1e1;
    -webkit-user-modify:read-write-plaintext-only;
    }
    .text::after  {
        content: attr(placeholder);
        position: absolute;
        top: 10px;
        color: #a9a9a9;
    }
    </style>
    </head>
    <body>
    <div class="content text" contenteditable="true" placeholder="你想说什么"></div>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
    
     $('.placeholder').on('input', function(){
              
         var htm = this.innerHTML;
         if (htm.length!= 0 && htm!='<br>') {
            $(this).removeClass('text');
         } else {
            $(this).addClass('text');
        }
    }); 
    
    </script>
    
    </body>
    </html>

    这方面资料很少,所以我也不是很明白是为啥。暂且先这样解决吧。

  • 相关阅读:
    rocketmq 命令示例
    原 荐 使用Spring Boot Actuator、Jolokia和Grafana实现准实时监控
    业务系统中最核心的状态设计,异常 case. (系统设计)
    大数据架构分析
    开源 java 电商系统
    数据一致性对账平台架构
    管理中遇到的问题--人,组织上的问题
    腾讯后台开发面试题
    理解inode
    TCP序列号和确认号
  • 原文地址:https://www.cnblogs.com/ld-swust/p/5727370.html
Copyright © 2011-2022 走看看