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. Jnotify文件监控的用法以及Jar文件导入的方法

    简介Jnotiy, 支持动态监控(支持级联监控)文件夹和文件的jar包.在linux中,调用linux底层的jnotify服务.在windows中,需要添加附件的dll文件. 因为通用的Maven仓库 ...

  2. uTenux——软件底层驱动组织结构介绍

    经过第一节对uTenux初步认识和第二节对uTenux\AT91SAM3S4C开发板的硬件结构的介绍,这一节我们将要学习的是uTenux\AT91SAM3S4C的软件底层驱动. 在悠龙公司的官网或者u ...

  3. Flip Game poj1753

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 32961   Accepted: 14407 Description Fli ...

  4. 对 strcpy_s 若干测试

    今天发现如果strcpy这函数,目标buffer太小,会有意想不到的崩溃.而且不容易调试.以后尽量要用strcpy_s了. strcpy_s是strcpy的更安全的版本 1.当目标字符串参数是一个字符 ...

  5. FreeSWITCH第三方库（其他）的简单介绍（三）

    FreeSWITCH使用了大量的第三方库,本文档主要介绍关联相关库的信息: 音频相关库的信息介绍参考:http://www.cnblogs.com/yoyotl/p/5486753.html 视频相关 ...

  6. form 登陆跳转页面练习（未连接数据库）和连接数据库版

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. 2016-2017 ACM-ICPC, NEERC, Southern Subregional Contest (Online Mirror, ACM-ICPC Rules, Teams Preferred) 几道简单题的题解

    A. Toda 2 题意:给你n个人,每个人的分数是a[i],每次可以从两个人到五个人的使得分数减一,使得最终的分数相等: 思路:假设答案为m:每个人的分数与答案m的差值为d[i],sum为d[i]的 ...

  8. 移动应用调试之 Inspect

    移动端开发时,我们常使用chrome自带的模拟器,模拟各种手机设备. 但模拟毕竟是模拟,当开发完毕,使用真机访问页面出现问题时如何调试呢? 下面介绍2种针对android机的调试方法 一.直接使用Ch ...

  9. 关于Docker在测试方面的应用

    Docker 火了很长一段时间了,前段时间简单的学习和试玩了一下子,发现他对测试很有价值,觉得有必要再次深入研究. 这里标记一些较好的学习网址,用作参考: InfoQ上面有系列的文章: 深入浅出Doc ...

  10. LTE Module User Documentation（翻译5）——Mobility Model with Buildings

    LTE用户文档 (如有不当的地方,欢迎指正!) 8 Mobility Model with Buildings   我们现在通过例子解释如何在 ns-3 仿真程序中使用 buildings 模型(特别 ...