div模拟textarea以实现高度自适应（去掉默认的@ mailto）

最新推荐文章于 2021-11-12 10:57:36 发布
最新推荐文章于 2021-11-12 10:57:36 发布
阅读量183 收藏
点赞数
分类专栏： jquery 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/axl234/article/details/84010594
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div模拟textarea</title>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style>
.test_box p {
 margin:0;
}
.test_box {
 width:400px;
 min-height:120px;
 _height:120px;
 max-height:300px;
 margin-left:auto;
 margin-right:auto;
 padding:3px;
 outline:0;
 border:1px solid #a0b3d6;
 font-size:12px;
 word-wrap:break-word;
 overflow-x:hidden;
 overflow-y:auto;
 _overflow-y:visible;
}
.test_box a {
 text-decoration:none;
 color:#000;
}
.test_box:focus {
 -moz-box-shadow:0 0 6px rgba(0, 100, 255, .45);
 -webkit-box-shadow:0 0 6px rgba(0, 100, 255, .45);
 box-shadow:0 0 6px rgba(0, 100, 255, .45);
 border-color:#34538b;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){    
     $(".test_box").keyup(function(){$(this).html($(this).text())})    
     $(".aa").click(function(){alert($(".test_box").html())})   
     })
</script>
</head>
<body>
<div id="main">
  <h1>div模拟textarea以实现高度自适应实例页面</h1>
  <div id="body" class="light">
    <div id="content" class="show">
      <div class="demo">
        <div id="testBox" class="test_box" contenteditable="true"> </div>
      </div>
    </div>
  </div>
</div>
<input type="button" value="按钮" class="aa" />
</body>
</html>

axl234
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div模拟textarea文本域实现高度自适应效果代码
09-25
textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。
textarea高度自适应，可删减高度
qq_36135258的博客
05-26 1730
用textarea实现高度自适应，可删减高度，可换行显示。
css去除textarea标签的默认样式
总结前端开发中遇到的问题，分享前端知识
11-12 2476
textarea{ border:none; outline: none;/*边线不显示*/ resize: none;/*禁止拉伸*/ background:#05E02E;/*带点绿*/ } 也可以设置width和height属性
textarea禁止可调节大小及取消默认样式
weixin_50255994的博客
10-10 3355
textarea在火狐或谷歌浏览器中会有个下三角（IE中没有，不存在此问题），用于方便客户调节文本框大小，但在某些应用功能里并不需要用户调节大小，开发人员只需要在开发时通过css属性resize来实现即可，下面为效果图 CSS代码： textarea { resize: none; } 可以调整大小的textarea↓ 不可调整大小的textarea↓ ...
TEXTAREA高度自适应自动展开
JED'S BLOG
08-21 1万+
需求web开发中，使用textarea的场景非常常见。但是原生的textarea不能根据用户输入的内容来伸缩自己的高度，这个特性感觉很反人类，在一些特定下我们希望它的高度能随着内容自适应，而不出现滚动条。就像下面的图一样。demo图实现代码 html <textarea id="textarea"></textarea> js // textarea 自适应高度 function make
textarea取消默认样式
黎成诃月的博客
01-08 4343
#inquiry-details { width: 18.93rem; height: 5.33rem; background-color: #EEEEEE; margin: 0 auto; display: block; border: none; resize: none; margin-top: 0.67rem;
div模拟textarea，解决高度自适应
11-28
解决textarea文字太多无法高度自适应问题，使用div模拟textarea
jquery实现textarea 高度自适应
01-19
之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩，今天花了点时间换了种实现方法，总结一下 代码如下: jQuery.fn.extend({  autoHeight: function(){  return this.each(function(){  ...
div实现自适应高度的textarea实现angular双向绑定
08-31
本文主要介绍了div实现自适应高度的textarea，实现angular双向绑定的方法。具有一定的参考价值，下面跟着小编一起来看下吧
textarea自适应高度标签，去除难看的滚动条
10-13
这是一个令textarea高度自适应的插件，使用jquery 去掉令人非常讨厌的滚动条；
elementUi 中如何修改 textarea 的默认高度？
Missbelover的博客
06-01 8494
elementUi 中如何修改 textarea 的默认高度？ 在element-ui 框架中，textarea 的默认高度为 :rows="2" 想修改高度的话，直接修改 :rows = “3” 或 :rows = “4” 即可 <el-input v-model="form.desc" type="textarea" :rows="5" placeholder="请输入内容" /> ...
textarea的高度自适应
樊小书生
03-16 1万+
textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。
h5如何实现textarea根据输入内容自适应高度
kerryqpw的博客
12-05 3094
h5如何实现textarea根据输入内容自适应高度         webApp的开发经常会在有评论的功能，textarea会随内容的增加自动增加元素的高度。 实现效果如图： ： 1.在底部设置fix的附件元素div，包含评论textarea 2.为textarea设置内容变化事件，当textarea换行时更改textarea高度 ，当textarea的高度增加时，附件元素 div的...
textarea文本域宽度和高度（width、height）自动适应变化处理
热门推荐
halfsking的博客
01-12 3万+
textarea通过cols和rows设置宽度和高度；也可以用style来设置width和height，分别介绍：   1. 设置宽度100%，textarea宽度随父元素变化； 2. 设置rows，textarea高度会发生变化，不再是仅仅一行；   以下是演示html，转载自：http://blog.csdn.net/domingoluis/article/details/667...
去除textarea标签的默认样式
gyueh的博客
11-14 4836
去除文本域的默认样式 textarea{ border:none; outline: none; resize: none; background:red; } outline: none;轮廓线不显示 resize: none;禁止拉伸 若设计稿中文本域有固定宽度，可以设置width和height属性，单位为px 最终效果如图： ...
textarea高度随着内容的多少而变化，高度可以删减
weixin_34174132的博客
09-30 573
问题：可以多行输入，并且输入框的高度随着内容的多少而变化，输入框的高度不能只增不减 由于 input 只能单行输入 textarea可以多行输入，并且高度可以随着内容的增加而增加，但是当内容删减的时候，textarea的高度并不能变低 解决办法：用一个替换标签，这个替代标签所以样式包括字体都和textarea一模一样，内容与textarea内容同步，高度自适应，但是要用一个包裹层，其d...
html 文本域固定死高度,【已解决】关于textarea文本域自动高度问题方案整理！...
weixin_35721505的博客
06-23 2825
textarea文本域是html中常见的常用的表单元素之一，很多人被文本域的默认高度折磨的没有脾气，为什么这么说？我就是被气鼓鼓的人！(这里仅适合web页面的文本域，其他环境下有不同方案，例如微信小程序端：)textarea用途分析场景一：默认的textarea文本域需要设置宽高或者行列数，这样实现的文本域才是正常的体现！场景二：另一种情况就是：文本域自动高度了，例如：qq输入框，微博输入框，都会...
ant design vue InputTextArea css处理高度自适应配置
最新发布
04-26
3. 接着，为了让文本框随着输入内容自适应高度，在CSS中再添加一些样式： ``` .autosize-textarea .ant-input { resize: none; overflow-y: hidden; } ``` 4. 最后，你需要在InputTextArea组件上添加一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值