textarea文本域的滚动条设置

最新推荐文章于 2023-05-03 23:49:01 发布
最新推荐文章于 2023-05-03 23:49:01 发布
阅读量1.1w 收藏 8
点赞数 2
分类专栏： html 文章标签： javascript java 开发工具 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_12644/article/details/82436092
版权

<html>
 <head>
  <title>测试编码</title>
  <script>
     </script>
 </head>
 <body>  
  <!--
  要设置textarea文本域的滚动条是否开启，使用style.overflow-x属性来控制。如：如果要隐藏该文本域的横向滚动条，在style属性中增加overflow-x属性控制，如下：
<textarea id=txtComments style="overflow-x:hidden"></textarea>
相应的，若要隐藏纵向滚动条：
<textarea id=txtComments style="overflow-y:hidden"></textarea>
如果使用代码控制的话，可能需要如下代码实现：
document.all("txtComments").style.overflowX="hidden";
overflow-x,overflow-y的可取值为：visible(默认取值),hidden,auto,scroll。
visible:始终不显示滚动条，文本区域的大小会根据内容的增加，自动增长，以显示全部内容。
scroll:不管文本区域里的内容有多少，始终显示滚动条。
hidden:始终不显示滚动条，内容超出层面的对象是不显示。
auto:如果内容在文本区域内可以全部显示,滚动条不显示,当内容无法全部显示时,内容被截断,加上滚动条显示所有内容。
  -->
  <textarea cols="15" rows="3"></textarea>
  <br/>
  <textarea cols="15" rows="3" style="overflow-x:scroll;overflow-y:hidden;"></textarea>
 <br/>
 </body>
</html>

 

iteye_12644
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css textarea 高度自适应,无滚动条
01-19
用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码代码如下: .t_area{ width:300px; overflow-y:visible } <textarea class=”t_area”> 随便在这里输入内容,textarea的高度会随着你输入的内容而变化,不会出现滚动条,实现很简单,就是一段css:overflow-y:visible </textarea> 首先，原则上实现textarea自适应必须适用css，不能直接适用“width＝100%”这样的写法，具体示例： 复制代码代码如下: <style> textarea {
textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法
12-13
在IE下文本框textarea会显示滚动条（如下：） 去掉textarea横向或纵向滚动条办法： <textarea style="overflow:hidden"></textarea> 可以通过overflow-x:hidden和overflow-y:hidden控制横向和纵向滚动条 要设置textarea文本域的滚动条是否开启，使用style.overflow-x属性来控制。如：如果要隐藏该文本域的横向滚动条，在style属性中增加overflow-x属性控制，如下： <textarea id=txtComments style="overflow-x:hidden"></textare
隐藏滚动条还可以滚动
m0_46581222的博客
05-03 541
:-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分。::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分。::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)::-webkit-scrollbar-thumb — 滚动条上的滚动滑块。
Bootstrap基础 CSS样式 个人总结
大大黄的博客
08-03 784
Bootstrap基础 CSS样式跟组件，自学总结01 BootStrap 框架 官网 www.bootcss.com 主要用于移动端响应式布局 学习内容： bootstrap 全局CSS bootstrap CSS组件 bootstrap javascript插件（总结02中） bootstrap引用： <link rel="stylesheet" href="bs/cs...
入门bootstrap
weixin_30765475的博客
06-01 609
role是一个html5的属性，role="form"告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单，在button中role="button"就是告诉设备，这是个按钮，可以点击。本质上是增强语义性，增强组件的可访问性、可用性和可交互性。 一、排版 大标题 解析： 1、重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；...
textarea高度自适应且不出现滚动条
Lingyv77的博客
03-26 996
主要实现就是将滚动条隐藏overflow: hidden, 然后监听滚动时候textarea的scrollHeight赋值给height就行实现设置高度, 值改变重置高度使得scrollHeight值重新刷新然后再赋值给height
hmtl--textarea的滚动条（转）
weixin_33766168的博客
08-20 960
要设置textarea文本域的滚动条是否开启，使用style.overflow-x属性来控制。如：如果要隐藏该文本域的横向滚动条，在style属性中增加overflow-x属性控制，如下：<textarea id=txtComments style="overflow-x:hidden"></textarea>相应的，若要隐藏纵向滚动条：<textarea id=tx...
textarea滚动条CSS样式属性设置
gla2018的博客
02-25 3723
textarea>滚动条属性CSS样式设置，包括textarea溢出横竖滚动条设置、隐藏滚动条、滚动条颜色、水平滚动条、垂直滚动条设置等。以上三个CSS样式属性可以设置的值为：visible(默认值)、scroll（显示）、hidden（隐藏）、auto（自动）。overflow内容溢出时的设置（设定被设定对象是否显示滚动条）举例：滚动条在y下显示（垂直显示滚动条），行数10行，列数30列。overflow-y垂直方向内容溢出时的设置。textarea滚动条CSS样式。隐藏textarea滚动条设置。
Angularjs中textarea标签随着输入内容自动变化，不出现滚动条
u012804473的博客
12-13 555
Angularjs中textarea标签随着输入内容自动变化，不出现滚动条。vue也同样可以使用
textarea隐藏滚动条
shuangyvshenshi的专栏
10-17 6390
设定多行文本框的滚动条 没有水平滚动条 没有垂直滚动条 没有滚动条 或 设定窗口滚动条的颜色 设置窗口滚动条的颜色为红色 scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。 加上一点特别的效果： 在样式表文件中定义好一个类，调用样式表。
div模拟textarea文本域实现高度自适应效果代码
11-21
一、关于textarea文本域以及高度自适应 textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。例如企鹅微博的输入框： 作为多行文本域功能来讲，textarea满足了我们...
textarea自适应高度标签，去除难看的滚动条
10-13
这是一个令textarea高度自适应的插件，使用jquery 去掉令人非常讨厌的滚动条；
2.4Bootstrap表单
热门推荐
为者常成，行者常至
05-03 1万+
1、基本案例 2、内联表单 3、水平排列的表单 4、被支持的控件 5、
Bootstrap CSS
qq_53694927的博客
08-24 424
Bootstrap CSS
Bootstrap
一名小码农的博客
11-17 341
Bootstrap 一、一个Bootstrap的标准模板 Bootstrap的文件主要包含css文件、js文件和字体文件。Bootstrap框架的核心是轻量的CSS基础代码库，通过<link>标签引入 <!DOCTYPE html> <html lang="en"> <head> <!--meta标签必须放在最前面-->...
bootstrap使用 ——01
09-28 172
1、栅格系统 1.栅格类数字表示的意思 .col-xs-12 .col-sm-6 .col-md-8 .col-lg-12　　这里的数字代表在各自对应的屏幕状态下占据的比例。12为总列数。比如col-sm-6，就是指在sm屏幕状态下，包含此类的盒子占据6份的宽度，也就是一半。其他的以此类推。如果在一个.row内包含的列（column）大于12个，包含多余列（column）的元素将...
CSS textarea去掉右下角可拖动状态条（不可拖动）
qq_43024468的博客
12-22 1956
1，隐藏右下角可拖动状态条 resize:none;
textarea标签去掉左右上下滚动栏
weixin_44037153的博客
10-26 681
textarea标签去掉左右上下滚动栏 resize: none;
怎样通过jquery控制文本域随着文本向下滚动
最新发布
06-09
可以使用 jQuery 中的 scrollTop() 方法来控制文本域随着文本向下滚动。具体步骤如下： 1. 创建一个文本域，例如： ```html <textarea id="my-textarea" rows="10"></textarea> ``` 2. 使用 jQuery 选择该文本域，并获取其高度和滚动条高度，例如： ```javascript var textarea = $("#my-textarea"); var height = textarea.height(); // 获取文本域的高度 var scrollHeight = textarea.prop("scrollHeight"); // 获取文本域的滚动条高度 ``` 3. 监听文本域的输入事件，每次输入时更新滚动条的位置，例如： ```javascript textarea.on("input", function() { // 获取当前文本域的滚动条高度 var currentScrollHeight = textarea.prop("scrollHeight"); // 计算需要滚动的距离 var distance = currentScrollHeight - scrollHeight; // 更新滚动条位置 textarea.scrollTop(textarea.scrollTop() + distance); // 更新滚动条高度 scrollHeight = currentScrollHeight; }); ``` 以上代码会监听文本域的输入事件，在每次输入时计算当前滚动条高度和之前的滚动条高度之差，然后更新滚动条的位置。这样就可以实现文本域随着文本向下滚动的效果了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值