div模拟文本框

最新推荐文章于 2024-05-16 10:14:39 发布
最新推荐文章于 2024-05-16 10:14:39 发布
阅读量4.7k 收藏 2
点赞数 1
分类专栏： html5 文章标签： textarea contenteditable DOMSubtreeModified 聚焦
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panying0903/article/details/52094384
版权

最近做H5页面，经常碰见实现高度自适应且计数的文本框需求，所以在这里记录一下。

其实很早之前就看了张鑫旭的“div模拟textarea文本域轻松实现高度自适应”，现在的做法也就是文章中提到的方法，主要是用到contenteditable属性。

html结构如下：

<div class="textarea_wrap">
    <div id="textarea" class="textarea" name="" contenteditable="plaintext-only"></div>
    <span class="textnum font9"><em id="textnum">0</em>/30</span>   
</div>


这里主要介绍下 contenteditable属性 ：（参考https://w3c.github.io/editing/contentEditable.html#contenteditable）

它主要的属性值有：

最低0.47元/天 解锁文章
jennypypy
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
angularjs使用div模拟textarea文本框的方法
10-17
今天小编就为大家分享一篇angularjs使用div模拟textarea文本框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2021
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
如何用div来实现textarea文本框
Dimuzero的博客
11-17 1276
如何用div来实现textarea文本框 1. textarea样式 1.1可以输入文本 2.选中时会有黑色outline框 3.大小可控可调 2.用div实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）
最新发布
2401_84152177的博客
05-16 484
你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！**](https://bbs.csdn.net/topics/618191877)可以被用户调整尺寸，注意：同时需要设置。元素变成用户可编辑。元素变成用户可编辑。
【HTML】使用 div 自定义实现 input、textarea 输入框（适合定制化场景）
qq_45677671的博客
07-05 3382
使用 div 自定义实现 input、textarea 输入框（适合定制化场景）
div模拟textarea文本框，输入文字高度自适应，且实现字数统计和限制
若末lan的博客
05-20 1938
需求： 文本框可根据输入内容高度自适应，不带滚动条，高度可变的那种，我搜索了很多，发现textarea无法实现我的需求，scrollHeigh这个无法获取实际内容的高度（我用的是那种简单的，可能我写的哪里不对吧；那种代码很多的，我又不想那么去做，麻烦。。。），所以只能div模拟textarea文本框了。 使用div模拟textarea文本框，输入文字高度自适应，且实现字数统计和限制，输入字数超...
html用div模拟文本框,如何使用div模拟实现textarea？
weixin_35062801的博客
06-08 1649
我们都知道textarea是form表单中一个很常见的元素，用于多行文本输入，可以设置行数和列数。但是默认的textarea样式在页面上看起来是很丑的，很多页面都是采用div模拟textarea实现。例如QQ空间主页面的发表说说，在你看页面源码后就会发现这个输入框其实是一个div元素，并不是一个textarea元素，现在我们就来看看这是如何实现的吧？首先来看看实现的效果是什么样的。实现效果关键属性...
div文本框的坑（好像富文本编辑器也是这样的）
hong0114的博客
12-07 732
标签插入div文本框
jQuery 文本框模拟下拉列表效果
12-10
网页代码如下： New Web Project 提交 运行后，需要刷新一下， 才可以加载jquery ...鼠标移入时文本框的样子，当鼠标案件释放时，若光标还在div上也是这样： 鼠标按键按下时时文本框的样子： 最终效果：
两种方法实现文本框输入内容提示消失
12-13
另外，x-webkit-speech 属性可以实现语音输入功能。 代码如下: <div><input type=”email” name=”email” spellcheck=”false” placeholder=”邮 箱” autofocus tabindex=”1...</div> 第二种方法： 用span模拟
使用div模拟输入框实现所见即所得
02-26
使用div模拟输入框实现所见即所得，这里使用一个简单的属性用的的css3的知识但是再ie浏览器下也是可以被使用的不会存在浏览器兼容性的问题。
使用div模拟输入框
m0_58739892的博客
02-16 551
使用div模拟输入框
手把手教你如何实现让一个div具有input框的效果
Orange71234的博客
06-21 2308
【代码】手把手教你如何实现让一个div具有input框的效果。
div仿input的使用
李耀书
01-04 2488
需求描述，输入框支持文本输入，以及支持标签在对应节点的插入。 1、首先封装组件，通过父子组件传参的方式进行数据的处理 用富文本插件体积略大 通过div标签的contenteditable属性来处理成仿input框 同时要处理在输入时，光标位置的问题。 <div ref="divInput" class="edit-div" style="-webkit-user-select: auto" :contenteditable="canEdit" @bl.
使用contenteditable=“true“改造div可编辑文本框
yaoqiuquan的博客
05-24 1385
contenteditable=“true” 可编辑 contenteditable=“false” 禁止编辑 contenteditable=“plaintext-only” 可以让编辑区域只能键入纯文本 不建议使用兼容性不好一：简单版 使用例子 二：升级版（可插入图片或者粘贴图片） 使用例子： 显示结果：...
div模拟input实现输入框
热门推荐
珍妮的小罐君
03-30 3万+
因为一些原因，无意中看到了H5的全局属性contenteditable,原本不知道这个属性该用在哪里，后来发现可以用带有contenteditable属性的div而不是input或者textarea来作为输入框（div可以根据内容自动调整高度哦）。但是div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢？   先看下效果： 看下代码（code）...
用div模仿多行文本框（文本框高度自适应）
Nikita_jg的博客
07-27 3965
只要给div设置  contenteditable="true"  ，div就可像input文本框一样获取到光标啦，代码如下： html： css:  div{ width:90%; border:1px solid #EBEBEB; min-height:24px; background-color:#FFF; border-radius:5px 5px; overflow
DIV模拟文本框
世間所有的相遇，都是久別重逢
09-03 789
无标题文档 .test_box { width: 400px; border: 1px solid #a0b3d6; min-height: 120px; /*max-height: 300px; _height: 120px; */ margin-left: auto; margin-right: auto; paddin
canvas下调出文本框
06-09
Canvas本身没有提供文本框的功能，但我们可以在Canvas上绘制一个矩形来模拟文本框。以下是一个示例： HTML代码： ``` <div> <canvas id="myCanvas" width="400" height="200"></canvas> <input id="textInput" type="text" placeholder="在这里输入文本"> </div> ``` JavaScript代码： ``` var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制文本框 ctx.fillStyle = "white"; ctx.fillRect(10, 10, 380, 30); // 监听输入框的键盘事件 var input = document.getElementById("textInput"); input.addEventListener("keydown", function(event) { if (event.keyCode === 13) { // 在Canvas上绘制输入的文本 ctx.fillStyle = "black"; ctx.font = "20px Arial"; ctx.fillText(input.value, 20, 35); // 清空输入框 input.value = ""; } }); ``` 在这个示例中，我们在Canvas上绘制了一个白色矩形，来模拟文本框。当用户在输入框中按下回车键时，JavaScript代码会在Canvas上绘制输入的文本。你可以根据需要修改这个示例来实现不同的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值