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>

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

div contenteditable placeholder的更多相关文章

  1. div contenteditable 代替Textarea,做成Vue属性动态绑定

    前言 一般都是用Textarea 文本来编辑,但发现可以用 div contenteditable = “true”,这个属性来搞定 <div contenteditable=true plac ...

  2. IOS中div contenteditable=true无法输入

    在IOS中<div contenteditable="true"></div>中点击时可以弹出键盘但是无法输入.加一个样式-webkit-user-sele ...

  3. js之向div contenteditable光标位置添加字符

    js之向div contenteditable光标位置添加字符  原理: 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生 ...

  4. 让div支持placeholder属性/模拟输入框的placeholder属性

    实现方式:css div:empty:before{ content: attr(placeholder); color:#bbb;}div:focus:before{ content:none; }

  5. Text selection in div(contenteditable) when double click

    背景: 在最近项目中,碰到一个问题:有一个可编辑的div需要双击时可编辑,blur或者回车时将编辑结果保存.你可能注意到双击时,文字会被选中,可编辑区域不会focus到光标位置.考虑到兼容性问题,写了 ...

  6. IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时,ios无法正常唤起输入法键盘

    原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...

  7. div contenteditable 重新编辑时focus光标定位到前面问题解决

    <div class="editdiv" id="edit" contenteditable="true">这是添加文字< ...

  8. 苹果手机IOS中div contenteditable=true 仿文本域无法输入编辑

    问题: 在苹果手机IOS中 contenteditable="true" 做文本域输入,点击可以弹出键盘但是无法输入,安卓都正常. 经测试后,记得加一个样式 -webkit-use ...

  9. div,contenteditable编辑器之ctrl+enter换行,enter发送

    //回车发消息 $scope.keyDownSend = function ($event) { var keycode = window.event?$event.keyCode:$event.wh ...

随机推荐

  1. MUI 页面传值 webview

    我们假设a.html 和b.html a.html 页面代码 <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  2. nginx fastcgi 超时问题解决记录

    在网站后台导数据时,出现超时的情况.经过网上查找资料和试验 主要在下面几个配置的限制 1.php配置 第一种:set_time_limit(0); 永不过期 第二种: php.ini   max_ex ...

  3. 利用jdbc处理oracle大数据---大文件和二进制文件

    一.Oracle中大数据处理 在Oracle中,LOB(Large Object,大型对象)类型的字段现在用得越来越多了.因为这种类型的字段,容量大(最多能容纳4GB的数据),且一个表中可以有多个这种 ...

  4. The Pilots Brothers' refrigerator

    2965 he Pilots Brothers' refrigerator Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1 ...

  5. mongodb .net driver

    1.介绍 The official MongoDB .NET Driver provides asynchronous interaction with MongoDB. Powering the d ...

  6. TI公司Tina-ti和FilterProDesktop下载地址

    http://www.ti.com/tool/tina-ti http://focus.ti.com/en/download/aap/DesignEnv/FilterPro-DT/FilterProD ...

  7. kaili 2.0 metasploit连接postgres数据库

    第一步:使用命令 db_init 初始化数据库

  8. [SAP ABAP开发技术总结]程序自己以JOB方式运行

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  9. hdu 3934&&poj 2079 (凸包+旋转卡壳+求最大三角形面积)

    链接:http://poj.org/problem?id=2079 Triangle Time Limit: 3000MS   Memory Limit: 30000K Total Submissio ...

  10. FZU 2213 Common Tangents(公切线)

    Description 题目描述 Two different circles can have at most four common tangents. The picture below is a ...