contenteditable的placeholder

2026-09-07

div的contenteditable和placeholder蹦出的火花

今天在做手机端发布描述内容时,需要实现换行,还需要有plachholder. 在文本框中换行自然想到了textarea. 问题似乎已经解决了,但是当内容发布后,在html中显示换行都丢失了. 这个时候就用到了contenteditable和placeholder <div class="con" contenteditable="true" pla

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:

关于 div 的 contenteditable 使用，placeholder 和复制图片显示并上传，按住 enter+ctrl 内容换行

当使用文本编辑的时候,首先会使用 textarea ,但是,这个里面不能加入其它标签,也就是不能富文本化. 于是可以使用 contenteditable 就是给 div 加上该属性.就变得丰富起来.使用的时候,发现有两个问题. 1.placeholder 无法正常使用,解决办法,是加上一段css: .con:empty:before{ content: attr(placeholder); color:#bbb; } .con:focus:before{ content:none; } 2.复制

DIV实现CSS 的placeholder效果

placeholder是HTML5中input的属性,但该属性并不支持除input以外的元素但我们可以使用Css before选择器来实现完全相同的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Div+placeholder</title> <style> .rich{ colo

<div>标签仿<textarea>。contentEditable=‘true’，赋予非表单标签内容可以编辑

需求:web页面需要一个文本输入框.1.该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息,2.文本框输入状态下其高度会随文本内容自动撑开. 方案选择:1.使用<textarea>标签.但是标签高度不会随文本高度自动撑开,而是出现滚动条.使用JS动态计算文本内容高度赋予<textarea>标签高度. 2.使用<div>或者<p>.<span>等非表单标签,通过赋予其contentEditable='true'属性,是其获得内

div设置contenteditable="true" 光标消失：原因

原因1:document.onselectstart= function(){return false;}; 原因2:父层设置了user-select:none 导致子层设置了 contenteditable 会出现异常,但是在ie和chrome并没有体现出来如果把编辑框换成input标签不会由于禁止文本选中而出现光标消失的情况了,可以自己尝试 <!DOCTYPE html> <html lang="en"> <head> <meta ch

vue中使用 contenteditable 制作输入框并使用v-model做双向绑定

<template> <div class="div-input" :class="value.length > 0 ? 'placeholder_hide' : ''" :style="{'min-width': minWidth}" :contenteditable="input" :placeholder="placeholder" @focus="ischecked

移动端的坑之在可编辑的div中实现placeholder

1.当我们个 div 设置了 contenteditable = "true" 这个块状元素就可以编辑了, 如果要实现 placeholder 直接写上去是没有效果的 <div contenteditable="true" placeholder="please write infomation"></div>//没有效果 2.可以添加样式来实现 *[contenteditable="true"]:e

div contenteditable 代替Textarea，做成Vue属性动态绑定

前言一般都是用Textarea 文本来编辑,但发现可以用 div contenteditable = “true”,这个属性来搞定 <div contenteditable=true placeholder="添加描述符" class="shut-down"></div> css .shut-down:empty:before{ content:attr(placeholder); font-size: 13px; color: #999;

自适应高度输入框（contenteditable/textarea）

一.用div模拟textarea div模拟输入域可以根据输入内容自动伸缩,而input和textarea输入内容较多时,高度固定,内容会显示不全. 1.坑1(IOS端无法输入) 在取消全局默认样式的时候,由于代码加了-webkit-user-select: none(设置或检索是否允许用户选中文本),只要在当前div上设置-webkit-user-select: text就可以输入了. 2.坑2(IOS端无法获取焦点或者只有双击后才可以获取焦点) 在移动端,为了解决300s延迟的问题,我的

HTML5 Content Editable实践

基于此开发文档:https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_Editable 问题:通过contenteditable实现的输入框没有placeholder,所以自己实现了一下 ;;;;} .cd-write .btn{background:#fda626;color:white;height:34px;font-size:16px;width:60px;text-align:center;border-radi

富文本ZSSRichTextEditor之趟坑集锦

富文本ZSSRichTextEditor是iOS原生与网页交互的集大成者,各种交互.自然问题也是多多,这篇文文章陆续更新遇到的奇葩问题. 1.问题1:从头条这种文章里头复制粘贴的文章,里边有图片,我们需求并不需要,如何过滤? 干了客户端,一开始额思路,总想从客户端的webview里头找出路,忙活半天,并未发现可以下手的地方,最后只能从网页这边想办法. #####最后确定如下思路: 找到html中zss_editor_content这个div容器的粘贴动作(onpaste)-- 在这个方法中遍历h

div模拟textarea且高度自适应

需求我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度,这实在是麻烦,而且效果不佳,接下来就用简单的方法来实现. 实现很简单,给 div 加上H5新属性 contenteditable 就行了,来看: <!DOCTYPE html> <html lang="en"> <head> <meta char

实现div可以调整高度（div实现resize）

实现div可以调整高度(div实现resize) 一.div 实现resize(类似textarea) 代码如下: <!DOCTYPE html> <html> <head> <title>div实现textarea效果</title> <style> #textarea { height: 200px; width: 300px; padding: 4px; border: 1px solid #888; resize: verti

HTML创建文本框的3种方式

我的第一个随笔,记录主要用来整理学习的知识点 1.input 创建单行文本框 <input type="text" size="10" maxlength="30" value="text1"> size :指定文本框中能够显示的字符数. value:设置文本框的初始值 maxlength :指定文本框可以接收的最大字符数 type="text":是定义单行的输入字段,用户可在其中输入文本.默认

Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template

pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言想必你一定使用过易企秀或百度H5等微场景生成工具制作过炫酷的h5页面,除了感叹其神奇之处有没有想过其实现方式呢?本文从零开始实现一个H5编辑器项目完整设计思路和主要实现步骤,并开源前后端代码.有需要的小伙伴可以按照该教程从零实现自己的H5编辑器.(实现起来并不复杂,该教程只是提供思路,并非最佳实践) 一个h5可视化编辑器种子, 高仿凡科建站模板.

文本框字符限制、focus光标定位

一.为一个元素的所有子元素设置统一样式:.className * { color: #6666 } 二.正则表达式: 1.去除所有HTML标签只保留文字: /<\/?.+?\/?>/2.去除空格:/\s+/ \s:匹配任何空白符(空格.制表符.换页.换行-),等价于[ \f\n\r\t\v] \s+:匹配上述任意多个字符 "." 表示除\n之外的任意字符 "*" 表示匹配0-无穷 "+" 表示匹配1-无穷三.设置contentedi

contenteditable元素的placeholder输入提示语设置

在某些情况下,textarea是不够用的,我们还需要显示一些图标或者高亮元素,这就需要用富文本编辑器,而富文本编辑器本质上是HTML元素设置了contenteditable. 然后可能需要像input.textarea有placeholder的输入提示语,但contenteditable的元素,placeholder是没用的,需要另外办法. 例子: HTML: <div class="con" contenteditable="true"></di

使用contenteditable=true的div模拟textarea（vue2.0中使用，带placeholder且高度自动撑开）

子组件: <template> <div class="item-address"> <span v-show="!hasAddress" class="address-placeholder">请输入详细地址</span> <div contenteditable="true" v-html="innerText" @input="chang

textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标

1.textarea自适应高度,placeholder使用图标自适应高度,有很多种办法: 1)jq: $("textarea").on("input",function(){ $(this).css({ 'height':'auto', 'overflow-y':'hidden' }).height(this.scrollHeight); }) 效果图: 2)使用插件:autosize,flexText等...插件肯定比一两句话的jq强大的多,或者是:这篇文章

contenteditable的placeholder

热门专题