替换textarea的文本编辑框的实现,可现实文字输入与显示图片、表情

方法1:

通过textare添加子元素img,该方式只有IE支持

 

<textarea id="editor" >图片:</textarea> 

<script type="text/javascript" > 
var editor = document.getElementById('editor'); 
var img = document.createElement('img'); 
img.src = 'url'; 
editor.appendChild(img); 

</script> 

 

 

 

 

 

然后通过editor.innerHTML获取带标签的内容

 

方法2:

通过div的contentEditable=true属性,经测试 谷歌 火狐 IE opera都支持,但手机浏览器不支持

 

<div contentEditable="true" id="editor"  style="height:70px;border-style:solid; border-width:1px; border-color:#AEEEEE"></div>
<script type="text/javascript" >
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用 lvgl V7.11.0 实现 textarea 文本编辑的代码示例: ```c // 创建 textarea lv_obj_t *textarea = lv_textarea_create(lv_scr_act(), NULL); lv_textarea_set_text(textarea, "Hello, world!"); // 配置 textarea 样式 lv_style_t style_textarea; lv_style_copy(&style_textarea, &lv_style_pretty); style_textarea.body.opa = LV_OPA_70; style_textarea.body.radius = 5; lv_textarea_set_style(textarea, LV_TEXTAREA_STYLE_BG, &style_textarea); // 配置 textarea 位置和大小 lv_obj_set_width(textarea, 200); lv_obj_set_height(textarea, 100); lv_obj_align(textarea, NULL, LV_ALIGN_CENTER, 0, 0); // 配置 textarea 文本编辑模式 lv_textarea_set_cursor_hidden(textarea, true); // 隐藏光标 lv_textarea_set_one_line(textarea, false); // 支持多行文本 lv_textarea_set_accepted_chars(textarea, "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz .,;:-?!"); // 只接受指定字符 // 配置 textarea 回调函数 lv_textarea_set_text_sel(textarea, true); // 允许选中文本 lv_textarea_set_cursor_pos(textarea, LV_TEXTAREA_CURSOR_LAST); // 将光标移动到文本末尾 lv_textarea_set_cursor_type(textarea, LV_CURSOR_BLOCK); // 光标样式为块状 lv_textarea_set_action(textarea, textarea_action); // 设置回调函数 // 定义 textarea 回调函数 static void textarea_action(lv_obj_t *textarea, lv_event_t event) { if (event == LV_EVENT_VALUE_CHANGED) { char *text = lv_textarea_get_text(textarea); printf("Textarea value changed: %s\n", text); lv_mem_free(text); } } ``` 以上代码中,我们首先创建了一个 textarea 对象,并设置了初始文本为 "Hello, world!"。接着,我们配置了 textarea 的样式、位置和大小,以及文本编辑模式和回调函数。 在回调函数中,我们使用 `lv_textarea_get_text()` 方法获取用户输入文本,并打印在控制台上。 需要注意的是,textarea 回调函数只有在文本发生改变时才会被触发,因此我们必须通过 `lv_textarea_set_text()` 方法来修改 textarea文本内容。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值