HTML5新属性contentEditable实现textarea

兼容性:所有主流浏览器都支持contentEditable属性

定义:规定元素内容是否可编辑,true为可编辑,false为不可编辑

示例:使用div实现一个textarea

<div className={styles.textarea} contentEditable="true"></div>
.textarea{
    width: 300px;
    min-height: 50px;
    border: 1px solid #ccc;
}

效果:

Alt

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<textarea>标签通常用于在网页上创建文本区域,允许用户通过键盘输入或粘贴文本。在输入或粘贴文本时,如果文本中包含HTML代码,浏览器会将其作为纯文本显示,而不会将其解析为HTML元素。 如果要在<textarea>中显示HTML代码并使其被解析为HTML元素,可以使用一些技巧。其中一种方法是使用JavaScript将HTML代码解析为DOM元素,然后将DOM元素添加到<textarea>中。另一种方法是使用contentEditable属性,将<textarea>设置为可编辑状态,并在其中输入HTML代码。 以下是一个示例,演示如何使用JavaScript解析HTML代码并将其添加到<textarea>中: ```html <textarea id="myTextarea"></textarea> <script> const htmlCode = '<h1>Hello, World!</h1>'; const parsedHtml = new DOMParser().parseFromString(htmlCode, 'text/html').body.firstChild; const myTextarea = document.getElementById('myTextarea'); myTextarea.appendChild(parsedHtml); </script> ``` 在上面的示例中,我们首先创建了一个<textarea>元素,并为其设置了一个ID。然后,我们定义了一段包含HTML代码的字符串。接下来,我们使用DOMParser API 将HTML代码解析为DOM元素,然后将其添加到<textarea>元素中。 请注意,这种方法可能会破坏<textarea>的默认行为,因此在实际使用中需要仔细考虑。另外,由于<textarea>元素是单标签元素,因此无法使用innerHTML属性将HTML代码添加到<textarea>中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值