textarea高度随文本内容变化,且不出现滚动条
通常文本域的写法如下
<textarea type="text" class="form-control pull-left" id="description" name="description"></textarea>
在页面的显示效果如下
一般会有一个初始高度,当不对该文本域进行处理,文本域的高度不会发生变化,当文本域内的内容过多时,将会出现滚动条,效果如下
效果不美观。
现在想让文本域的高度随内容的多少而发生改变,且不会产生滚动条。
可以使用以下代码
$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
显示效果如下
该文本域的高度会随着内容的增多而变大,也会随着内容的减少而减小。实时变化。
有时候情况会比较复杂,例如我在做一个项目,前台使用的是bootstrap,使用model模态框弹出一个页面,在页面上有一个文本域,保持原本的代码保持不变,效果就发生了变化。
我猜想这种效果的出现可能是因为弹出框的高度和宽度问题。
后来改了一下代码,首先给文本域一个默认高度
<textarea type="text" class="form-control pull-left" id="description" name="description" style="height: 50px"></textarea>
文本域得到焦点后,再实时监控文本域里的内容,然后让高度随之变化。
$("#description").focus(function () {
$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
});
textarea高度随文本内容变化,且不出现滚动条的更多相关文章
- s:textarea中的文本内容在什么时候才能被赋值给Action中的属性?
下面是jsp程序片段: <s:form id="startForm" name ="startForm" action="/hall/hall_ ...
- html中用div代替textarea实现输入框高度随输入内容变化
项目中的需求:留言栏输入高度变化,超过1行时,自动伸展,超过4行后,不再伸展.主要思想是利用最小高度和最大高度,再加上overflow来实现,到了最大高度,文字不会溢出而是隐藏.根据文本框中字体的大小 ...
- 设置HTML的TextArea标记跟随文本内容自动设置高度
写内容的时候用的是textarea来写,可以换行,然后预览页面也要显示是换行才行,所以预览页面还是要用textarea来显示, 样式去掉边框,不可以拉伸,不可编辑 // html <textar ...
- HTML的TextArea标记跟随文本内容自动设置高度
js <textarea name="textarea" id="textarea" style='overflow-y: hidden;height:2 ...
- [iOS] 输入框高度随输入内容变化
一般,类似聊天软件的输入框默认都是显示一行的,在用户输入过程中根据输入文字的内容来改变输入框的高度,以便显示全部文字.像微信,QQ的输入框就是这样的.那么这个效果应该怎么实现呢? 新博客:wosson ...
- td高度不随内容变化display:block;display:block;display:block;display:block;display:block;
在TD里加个DIV就可以解决!CSS对应改成#aaa td div{ height:236px; overflow:hidden; 在TD里加个DIV就可以解决!CSS对应改成#aaa td div{ ...
- Android应用开发EditText文本内容变化监听方法
import android.app.Activity; import android.os.Bundle; import android.text.Editable; import android. ...
- Android EditText文本内容变化监听方法
package com.google; import android.app.Activity; import android.os.Bundle; import android.text.Edita ...
- Jquery实现textarea根据文本内容自适应高度
本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...
随机推荐
- oo前三次作业博客总结
第一次作业 实现多项式的加减运算,主要问题是解决输入格式的判断问题. 输入实例: {(3,0), (2,2), (12,3)} + {(3,1), (-5,3)} – {(-199,2), (29,3 ...
- nginx的配置系统
nginx的配置系统由一个主配置文件和其他一些辅助的配置文件构成.这些配置文件均是纯文本文件,全部位于nginx安装目录下的conf目录下. 配置文件中以#开始的行,或者是前面有若干空格或者TAB,然 ...
- XAMPP【phpmyadmin】外网访问被拒绝解决办法
问题场景: 在阿里云搭建一个apache服务器,正常访问XAMPP目录下的页面. 服务器本地是可以正常访问的 但是远程 就不可以访问了: 出现这样的画面: 解决方法 1.按照提示找到httpd-xam ...
- CreateProcessEx创建进程
NTSYSCALLAPI NTSTATUS NTAPI NtCreateProcess( OUT PHANDLE ProcessHandle, IN ACCESS_MASK DesiredAccess ...
- vim如何达到高效
参考:http://blog.jobbole.com/44891/ 搜索技巧 1. 使用*快速查询当前光标所在的单词 然后使用n快速找到下一个查询结果: 使用N快速找到上一个查询结果 2. 在.vim ...
- VUX中selector组件数据错误,value-map不能正常转换接口数据
项目中有个地方需要用到下拉框,使用VUX的selector组件,使用value-map属性进行接口数据转换未成功,出来的还是原数据 看了又看也没写错呀,字段什么的都是复制上去的,去网上查了也没查到怎么 ...
- PAT_A1085#Perfect Sequence
Source: PAT A1085 Perfect Sequence (25 分) Description: Given a sequence of positive integers and ano ...
- NOIP后一波总结
我的山寨较为可靠分数为305(洛谷是真的水~显然不能用啊,果断换了一组合适的数据) 据大神们估计,得奖的分数在280, 我肯定是没有啥希望了.(我旁边的lxy同学从初二开始,每次以超分数线至少60分的 ...
- 2019-8-31-C#-使用汇编
title author date CreateTime categories C# 使用汇编 lindexi 2019-08-31 16:55:58 +0800 2019-2-16 8:56:5 + ...
- Spring Bean 的生命周期,如何被管理的
1. 实例化一个Bean,也就是我们通常说的new 2. 按照Spring上下文对实例化的Bean进行配置,也就是IOC注入 3. 如果这个Bean实现了BeanNameAware接口,会调用它实现的 ...