div 仿 功能健全的textArea，实现监听

最新推荐文章于 2024-04-25 10:08:54 发布
最新推荐文章于 2024-04-25 10:08:54 发布
阅读量1.3k 收藏 5
点赞数 1
分类专栏： 前端 文章标签： 前端 div textarea 监听输入 无图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frank_come/article/details/78773040
版权
神奇的div实现textarea 文本编辑
摘要由CSDN通过智能技术生成

因为一直苦恼textarea右下角的小三角，觉得很丑，所以网上找资料自己写了一个div仿textarea的例子

以下为代码


1.将div的属性添加一个  contenteditable="true"

<div   contenteditable="true" ></
最低0.47元/天 解锁文章
无来往
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE实现Div内容全选和复制(键盘监听事件)
你是小新吗
06-26 1937
目录 1.VUE环境和工程搭建 2.引入Element UI 3.引入jquery 4.代码实现 5.效果 1.VUE环境和工程搭建 https://blog.csdn.net/qq_26154077/article/details/105470192 2.引入Element UI https://element.eleme.cn/#/zh-CN/component/installation 3.引入jquery https://blog.csdn.net/weixin_439
将div渲染成textarea框，类似于ant design 的TextArea
最新发布
【爱打盹的喵】的专栏
06-07 182
原始效果输入时效果。
div添加contentEditable=true的坑
Jennie的专栏
10-13 1268
div添加contentEditable=true;回退键backspace无法删除光标左侧的文字，但是，delete键可以删除光标右侧的文字。 查了资料（资料的链接：https://www.cnblogs.com/CherishTheYouth/p/CherishTheYouth_1105.html），启发我了。给这个元素添加keydown的事件监听，阻止冒泡就解决了问题。
监听div变化事件
qq_42310995的博客
05-07 4473
DOMNodeInserted $('.videoNewsBox').on('DOMNodeInserted',function(){ isPageChanged(); })
监听div滚动高度
IICOOM的博客
03-24 1598
前端开发经常会遇到监听滚动事件的情况，检测到页面滚动距离做一些操作。有时候也会监听一些容器的滚动如：div，与前者有一些差别，本文会先后介绍这两种情况如何实现。
dom中监听事件问题（addEventListener）
lgp199881的博客
02-06 974
事件监听的问题
contenteditable可编辑功能,监听输入内容与回车操作
buruyang的博客
04-25 1008
在输入非英文字符时，将光标移动到最后面使用方法用于创建一个新的 Range 对象，Range 对象代表文档中的一段连续的区域sel?sel?第一行代码 let currentDom = document.getElementsByClassName(‘word-block’)[0];用于获取文档中 class 为 ‘word-block’ 的第一个元素，并将其赋值给变量 currentDom。
div实现自适应高度的textarea实现angular双向绑定
08-31
在Angular框架中，通常使用`<textarea>`元素来实现这样的功能，但有时`<textarea>`的局限性会让我们转向其他解决方案，比如使用`div`元素配合`contenteditable`属性。本文将探讨如何用`div`实现自适应高度的textarea...
JavaScript 监听textarea中按键事件
12-12
有个textarea， Java代码 代码如下: <textarea id=”text”></textarea> 经常会定义onKeyPress=”keypress();”,并定义以下方法。 代码如下: var keypress = function(e){ var e = e || window.event; ...
electron+vue实现div contenteditable截图功能
10-15
总结起来，`electron+vue`实现`div contenteditable`截图功能涉及Vue组件的创建、监听用户输入、操作DOM进行表情插入，以及利用Electron的屏幕捕获能力。这个过程需要对Vue和Electron的API有深入理解，并能解决可能...
div模拟textarea文本域实现高度自适应效果代码
11-21
然而，textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条，高度固执地岿然不动。所以，有时候，为了增加交互体验想让文本域高度自适应的时候，就会遇到麻烦...
div可编辑之contenteditable属性 二
weixin_34138056的博客
12-12 722
2019独角兽企业重金招聘Python工程师标准>>> ...
富文本编辑器，可编辑div contentEditable=true，光标位置window.getSelection
u012963469的博客
08-16 1504
在近期项目中，需要在一个实时通信软件中，在发送消息时支持发送加粗的消息，现在总结一下使用心得。 需求： 在发送消息时，点击加粗图标，图标添加选中效果，输入的文字、添加的文字表情、@人员都需要显示为加粗效果。点击加粗图标，图标取消选中效果，输入的文字、添加的文字表情、@人员都需要显示为正常。在删除的时候，文字表情、@人员需要整块删除。 实现： 需要加粗消息，就需要使用到加粗b标签，所以一般的输入框input，textarea无法满足，经查询最后选择使用可编辑的div。将div设置属性contentEdita
HTML5 编辑区域属性 contenteditable 的使用与监听
weixin_30706507的博客
12-06 2049
HTML： <span contenteditable="true">内容内容内容</span> 效果： 监听失焦（vue）—— <span contenteditable="true" @blur="editnameSet(index, $event)">{{item.name}}</span> 监听实时修改（vue）...
vue中当使用div标签的contenteditable的时候,动态获取输入内容的方法
qq_39687662的博客
08-21 5940
当使用div标签进行编辑的时候,如果想要动态获取输入的值,也就是div盒子中的内容,用v-model会报错,不支持 解决方案(用ref和this.$refs以及js的innerHTML来获取) 同时要记得用v-on监听一个input事件 用给标签加上ref属性之后,再到监听input事件的方法里去用this.$refs.自定义的ref名字,即可获取到这个标签对象,然后再用innerHTML即可获取到里面的值 ...
实测可行的监听div里面的内容变化的方法
劲枫的博客
05-08 4948
console.log($("#notebook_name").text());里面的内容按照网速不同页面加载速度，导致有的时候页面加载就用内容，有的时候却没有。因此需要监听里面的内容是否变化。用如下的方法 $("#notebook_name").bind('DOMNodeInserted', function (e) { console.log("变化了") });jupyter noteboo...
可编辑div contenteditable = “true“限制字数输入框
熙冰
01-17 8010
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .main { position: relative; ...
layui监听textarea
09-22
### 回答1： 你可以使用 layui 的 form 模块来监听 textarea 的输入。具体步骤如下： 1. 引入 layui 的 form 模块 ...通过以上方法，我们可以很方便地使用layui监听textarea的事件，实现一些特定的业务逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值