contenteditable 元素的placeholder

最新推荐文章于 2025-03-12 17:42:02 发布
最新推荐文章于 2025-03-12 17:42:02 发布
阅读量1.7k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 常用代码片段 文章标签： java 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125993552
本文介绍了如何在HTML的contenteditable元素中实现placeholder效果。通过选择器，当元素内容为空时显示占位符；同时，处理元素的焦点和失去焦点事件，确保用户未输入内容时能恢复占位符显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

假设我们希望给定contenteditable元素有一个占位符：

<div contenteditable></div>

1.使用:empty选择器

我们使用自定义属性 ,data-placeholder来设置占位符： 
<div class="editable" contenteditable data-placeholder="Edit me"></div>

当元素值为空时，将显示该属性：

.editable:empty:before {
    content: attr(data-placeholder);
}

2. 处理事件

首先，我们将id和data-placeholder属性添加到元素中，如下所示： 

                

        

    

    
  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    



                



	

		

			

				
					
contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作

				
			

			

				

					codingWeb的博客
				

				

					11-07
					
					9295
					
				

			

		

		

			
				
这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等

HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素

			
		

	



                

            
              



	

		

			

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

				
			

			

				

					12-30
				

			

		

		

			
				
在某些情况下，textarea是不够用的，我们还需要显示一些图标或者高亮元素，这就需要用富文本编辑器，而富文本编辑器本质上是HTML元素设置了contenteditable。
然后可能需要像input、textarea有placeholder的输入提示语，但contenteditable的元素，placeholder是没用的，需要另外办法。
例子：
HTML：

<div class=con contenteditable=true></div>
CSS：

.con{
    width: 400px;
    height: 400px;
    border: 1px solid

			
		

	



              


  
              

                


	

		

			

				
					
网页内容placeholder占位特效

				
			

			

				

					06-24
				

			

		

		

			
				
网页内容placeholder占位特效是一款可以在网页加载的过程中，在显示内容的地方显示预定的CSS3动画，增强用户体验。

			
		

	





	

		

			

				
					
div的contenteditable和placeholder蹦出的火花

				
			

			

				

					QDY5945的博客
				

				

					11-10
					
					241
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					weixin_34202952的博客
				

				

					10-09
					
					871
					
				

			

		

		

			
				
在某些情况下，textarea是不够用的，我们还需要显示一些图标或者高亮元素，这就需要用富文本编辑器，而富文本编辑器本质上是HTML元素设置了contenteditable。
然后可能需要像input、textarea有placeholder的输入提示语，但contenteditable的元素，placeholder是没用的，需要另外办法。
例子：
HTML：

&lt;div class="co...

			
		

	





	

		

			

				
					
contenteditable型的编辑框，实现placeholder

				
			

			

				

					dd1145322563的专栏
				

				

					08-08
					
					1640
					
				

			

		

		

			
				

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;contenteditable&lt;/title&gt;
&lt;style&gt;
.content{
width:380px;
height:100px

			
		

	





	

		

			

				
					
H5 contenteditable 可编辑区域 以及 实现 placeholder

				
			

			

				

					u014206461的博客
				

				

					07-09
					
					1539
					
				

			

		

		

			
				
一：H5 元素内容可编辑

contenteditable 是可以在元素上设置以使内容可编辑的属性。它适用于 DIV、P、UL 等元素。您必须指定它，例如，<element contenteditable="true|false">。


注意: 当contenteditable元素上没有设置属性时，它将从其父元素继承。

<h2> Shoppping List(Content Editable) </h2>
<ul class="content-editable"

			
		

	





	

		

			

				
					
div 设置contenteditable 之后的placeholder效果

				
			

			

				

					Wq_2977的博客
				

				

					05-21
					
					2173
					
				

			

		

		

			
				
假设有个id为“editBox”的div，需求是

1、其可编辑  --->对其设置contenteditable =“true”，即可；

2、拥有类似input的“placeholder”效果  --->解决方案如下：


// HTML：
<div class="container">
    <div class="bgholder">请输入内容...

			
		

	





	

		

			

				
					
通过创建style标签给 contenteditable=“true“ 的可编辑元素增加placeholder(占位符)

				
			

			

				

					weixin_46858893的博客
				

				

					06-08
					
					651
					
				

			

		

		

			
				
contenteditable 可编辑元素增加 placeholder(占位符)

			
		

	





	

		

			

				
					
div contenteditable文本框placeholder属性

				
			

			

				

					金大光
				

				

					08-21
					
					3986
					
				

			

		

		

			
				
用div的contenteditable属性模拟文本框的时候是没有placeholder属性的，但是placeholder得需求又很强烈，本文实例讲述的是如何用css写出div的placeholder属性

			
		

	





	

		

			

				
					
div设置contenteditable=“true“实现 placeholder效果

				
			

			

				

					weixin_45535843的博客
				

				

					03-12
					
					359
					
				

			

		

		

			
				
这样就可以实现了，如上图我在disabled的时候也需要展示，所以多加了一条。

			
		

	





	

		

			

				
					
div contenteditable placeholder

				
			

			

				

					weixin_30765505的博客
				

				

					08-01
					
					212
					
				

			

		

		

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

第一种，Css的实现方式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style&...

			
		

	





	

		

			

				
					
div contenteditable=“true”后，placeholder的样式。

				
			

			

				

					fang562878311的博客
				

				

					04-07
					
					2755
					
				

			

		

		

			
				
.shut-down:empty:before{
    content:attr(placeholder);
    font-size: 13px;
    color: #999;
}
.shut-down:focus:before{
    content:none;
}

			
		

	





	

		

			

				
					
vue3 给div加contenteditable=“true”后，显示placeholder

				
			

			

				

					qdm13209211861的博客
				

				

					05-17
					
					944
					
				

			

		

		

			
				
【代码】vue3 给div加contenteditable=“true”后，显示placeholder。

			
		

	





	

		

			

				
					
html标签设置提示语,contenteditable元素的placeholder输入提示语设置方法

				
			

			

				

					weixin_36138524的博客
				

				

					06-17
					
					322
					
				

			

		

		

			
				
在某些情况下，textarea是不够用的，我们还需要显示一些图标或者高亮元素，这就需要用富文本编辑器，而富文本编辑器本质上是HTML元素设置了contenteditable。然后可能需要像input、textarea有placeholder的输入提示语，但contenteditable的元素，placeholder是没用的，需要另外办法。例子：HTML：CSS：.con{width: 400px;...

			
		

	





	

		

			

				
					
div实现placeholder的效果

				
			

			

				

					weixin_45855469的博客
				

				

					09-07
					
					1121
					
				

			

		

		

			
				
用来选中没有子节点的元素，这里的子节点包括元素节点和文本节点（包括空格），注释、处理指令和通过css设置的content属性不会影响。请注意，除了注释之外，大部分处理指令都是与服务器端交互相关的，并且需要服务器端进行相应的处理才能生效。：这是HTML中的注释标记，在此处编写的内容不会被浏览器呈现给用户，只是作为开发者的备注信息。：这是PHP的处理指令，用于嵌入服务器端的PHP代码到HTML文档中，实现动态内容生成。的效果，即输入框中没有内容的时候显示提示，用户输入内容后提示就消失。

			
		

	





	

		

			

				
					
html5属性contenteditable

				
			

			

				

					
				

				

					06-03
					
					168
					
				

			

		

		

			
				
【代码】html5属性contenteditable。

			
		

	





	

		

			

				
					
wangeditor如何设置动态placeholder

					
最新发布

				
			

			

				

					06-27
				

			

		

		

			
				
<think>我们正在讨论WangEditor，它是一个开源的富文本编辑器。问题是如何设置动态placeholder。在WangEditor中，placeholder可以通过配置项设置，但默认是静态的。如果要动态设置，我们需要在初始化后通过API来更新placeholder。步骤：1.初始化编辑器时，可以设置一个初始的placeholder。2.之后，我们可以通过调用编辑器的API来动态改变placeholder。具体实现：在初始化编辑器后，我们可以使用`editor.config.placeholder`来设置新的placeholder，然后调用`editor.create()`重新创建编辑器？但是这样会重新创建，可能不是我们想要的。实际上，WangEditor（v5）提供了更直接的方法：我们可以直接修改placeholder并刷新编辑器。但是注意：在v5版本中，WangEditor的配置项在初始化后不能直接修改，需要调用特定的方法。不过，对于placeholder，我们可以直接修改DOM元素，或者使用编辑器提供的配置方法。然而，查阅WangEditor的文档，我们发现v5版本中并没有直接提供动态更新placeholder的API。因此，我们可以通过操作DOM的方式来实现。另一种思路：在v4版本中，我们可以通过设置配置项来初始化placeholder，但动态改变同样没有直接API。所以，我们可能需要自己操作DOM。这里以v5版本为例，我们可以这样做：1.初始化编辑器时设置placeholder。2.当需要改变placeholder时，找到编辑器对应的textarea元素（或者contenteditable元素），然后修改其placeholder属性。但是注意，WangEditorv5有两种模式：默认模式（textarea）和自定义模式（divcontenteditable）。在默认模式下，它使用textarea，我们可以直接设置textarea的placeholder属性。在自定义模式下，它使用div[contenteditable=true]，这种元素本身不支持placeholder，所以WangEditor是通过一个div覆盖在编辑器上来模拟placeholder的。因此，我们需要修改这个模拟的placeholder元素的文本内容。具体操作：对于默认模式（textarea）：-获取textarea元素，然后设置其placeholder属性。对于自定义模式（divcontenteditable）：-找到编辑器内部的一个类名为'w-e-text-placeholder'的元素，然后修改它的innerText。由于我们不确定用户使用的是哪种模式，所以我们需要判断一下。但是，更推荐的做法是：在初始化时，我们可以通过配置项设置placeholder，然后当需要动态改变时，我们销毁编辑器再重新初始化？这样可能不太高效。因此，我们可以写一个函数来动态更新placeholder：示例代码（假设我们使用的是v5版本）：```javascript//初始化编辑器consteditor=newWangEditor('#editor-container')editor.config.placeholder='初始placeholder'editor.create()//动态更新placeholder的函数functionsetEditorPlaceholder(newPlaceholder){//尝试获取textarea（默认模式）consttextarea=editor.$textContainerElem.find('textarea')[0]if(textarea){textarea.placeholder=newPlaceholder}else{//自定义模式：查找placeholder元素constplaceholderElem=editor.$textContainerElem.find('.w-e-text-placeholder')[0]if(placeholderElem){placeholderElem.innerText=newPlaceholder}}}//调用函数更新placeholdersetEditorPlaceholder('新的placeholder文本')```但是，上面的代码依赖于编辑器内部的结构，如果WangEditor的内部结构发生变化，可能会导致失效。所以，在使用时需要注意版本兼容性。另外，WangEditorv5的文档中并没有提供动态更新placeholder的方法，所以这算是一个变通方案。如果我们使用的是v4版本，方法类似，但类名可能不同。另一种更安全的方式：我们可以通过重新配置并重建编辑器来实现，但这会重新初始化整个编辑器，可能会丢失当前编辑的内容。所以，如果我们希望保留内容，就需要先保存内容，然后重建后恢复内容。这样比较麻烦。因此，我们推荐使用上述直接操作DOM的方式，并注意在编辑器结构变化时调整。下面给出一个完整的示例（WangEditorv5）：</think>### 动态设置 WangEditor 的 Placeholder

在 WangEditor 中设置动态 placeholder 需要通过 JavaScript 操作 DOM 实现，因为编辑器本身不提供直接的 API 来动态更新 placeholder。以下是详细实现方案：

#### 解决方案代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态 Placeholder 示例</title>
    <!-- 引入 WangEditor -->
    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <style>
        #editor-container { border: 1px solid #ccc; }
        #placeholder-controls { margin-top: 10px; }
    </style>
</head>
<body>
    <div id="editor-container"></div>
    
    <div id="placeholder-controls">
        <input type="text" id="new-placeholder" placeholder="输入新提示文本">
        <button onclick="updatePlaceholder()">更新提示文本</button>
        <button onclick="togglePlaceholder()">切换提示文本</button>
    </div>

    <script>
        // 初始化编辑器
        const { createEditor, createToolbar } = window.wangEditor
        const editorConfig = {
            placeholder: '初始提示文本...',  // 初始 placeholder
            onChange(editor) {
                syncPlaceholderVisibility();
            }
        };
        
        const editor = createEditor({
            selector: '#editor-container',
            config: editorConfig,
            mode: 'default',  // 或 'simple'
        });
        
        const toolbar = createToolbar({
            editor,
            selector: '#editor-container',
            mode: 'default',
        });

        // 同步 placeholder 可见性
        function syncPlaceholderVisibility() {
            const placeholder = document.querySelector('.w-e-text-placeholder');
            if (!placeholder) return;
            
            // 根据内容显示/隐藏 placeholder
            const isEmpty = editor.getText().trim() === '';
            placeholder.style.display = isEmpty ? 'block' : 'none';
        }

        // 更新 placeholder 文本
        function updatePlaceholder() {
            const newText = document.getElementById('new-placeholder').value || '新提示文本...';
            const placeholder = document.querySelector('.w-e-text-placeholder');
            
            if (placeholder) {
                placeholder.textContent = newText;
            }
            syncPlaceholderVisibility(); // 更新后检查显示状态
        }

        // 动态切换 placeholder 示例
        const placeholders = ['请输入内容...', '开始写作吧...', '分享你的想法...'];
        let index = 0;
        function togglePlaceholder() {
            index = (index + 1) % placeholders.length;
            const placeholder = document.querySelector('.w-e-text-placeholder');
            if (placeholder) {
                placeholder.textContent = placeholders[index];
            }
        }

        // 初始化时同步一次
        setTimeout(syncPlaceholderVisibility, 100);
    </script>
</body>
</html>
```

#### 代码解释

1. **初始化编辑器**
   - 使用 `createEditor` 创建编辑器实例
   - 通过 `config.placeholder` 设置初始提示文本
   - `onChange` 事件监听内容变化，触发 placeholder 显示/隐藏

2. **核心函数**
   ```javascript
   // 更新 placeholder 文本
   function updatePlaceholder() {
       const newText = document.getElementById('new-placeholder').value;
       const placeholder = document.querySelector('.w-e-text-placeholder');
       placeholder.textContent = newText;
   }
   
   // 同步显示/隐藏状态
   function syncPlaceholderVisibility() {
       const isEmpty = editor.getText().trim() === '';
       placeholder.style.display = isEmpty ? 'block' : 'none';
   }
   ```
   - 通过 DOM 选择器 `.w-e-text-placeholder` 获取 placeholder 元素
   - 修改 `textContent` 属性更新提示文本
   - 根据编辑器内容决定是否显示 placeholder

3. **动态切换示例**
   ```javascript
   const placeholders = ['文本1...', '文本2...', '文本3...'];
   let index = 0;
   
   function togglePlaceholder() {
       index = (index + 1) % placeholders.length;
       placeholder.textContent = placeholders[index];
   }
   ```
   - 循环切换预定义的提示文本数组
   - 可用于实现周期性变化的提示效果

4. **注意事项**
   - 使用 `setTimeout` 延迟初始同步，确保 DOM 加载完成
   - 在内容变化时调用 `syncPlaceholderVisibility()`
   - 编辑器聚焦时会自动隐藏 placeholder，无需额外处理

#### 实现原理
WangEditor 的 placeholder 实际是一个绝对定位的 `<div>` 元素（类名为 `w-e-text-placeholder`），通过操作该 DOM 元素的样式和内容即可实现动态效果。核心步骤：
1. 获取 placeholder 元素：`document.querySelector('.w-e-text-placeholder')`
2. 修改文本：`element.textContent = '新文本'`
3. 控制显隐：`element.style.display = 'block'/'none'`

---

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
紫微前端

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值