HTML5 新属性contenteditable

最新推荐文章于 2024-06-27 16:19:12 发布

momo_mom177

最新推荐文章于 2024-06-27 16:19:12 发布

阅读量198

点赞数

文章标签：前端 html html5

本文链接：https://blog.csdn.net/momo_mom177/article/details/124118587

版权

这篇博客介绍了HTML的contenteditable属性，该属性允许将任何元素如div、span、td变为可编辑区域，用户可以直接在页面上修改内容，失焦后元素恢复原样，这种特性在富文本编辑和动态数据输入场景中很有用。

摘要由CSDN通过智能技术生成

今天偶然看见这个属性，可以把一个div,span,td等元素聚焦的时候可以直接变成输入框，改里面的数值，失焦的时候变成原来的元素，内部的值改了

<div contenteditable="true">123241</div>
<span contenteditable="true">7787484span</span>
 <table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td contenteditable="true">January</td>
    <td contenteditable="true">$100</td>
  </tr>
  <tr>
    <td contenteditable="true">Feb</td>
    <td contenteditable="true">$200</td>
  </tr>
</table>