`
robinrain
  • 浏览: 59863 次
  • 性别: Icon_minigender_1
  • 来自: 威海
社区版块
存档分类
最新评论

textarea 调整案例

 
阅读更多

 






textarea样式 去掉textarea的滚动条

1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)
    overflow-x水平方向内容溢出时的设置
    overflow-y垂直方向内容溢出时的设置
    以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)
    scrollbar-arrow-color上下按钮上三角箭头的颜色
    scrollbar-base-color滚动条的基本颜色
    scrollbar-dark-shadow-color立体滚动条强阴影的颜色
    scrollbar-face-color立体滚动条凸出部分的颜色
    scrollbar-highlight-color滚动条空白部分的颜色
    scrollbar-shadow-color立体滚动条阴影的颜色

我们通过几个实例来讲解上述的样式属性:

1.让浏览器窗口永远都不出现滚动条
    没有水平滚动条
    <body style="overflow-x:hidden">
    没有垂直滚动条
    <body style="overflow-y:hidden">
    没有滚动条
    <body style="overflow-x:hidden;overflow-y:hidden">或<body 
    style="overflow:hidden">

2.设定多行文本框的滚动条

没有水平滚动条
   <textarea style="overflow-x:hidden"></textarea>

   没有垂直滚动条
   <textarea style="overflow-y:hidden"></textarea>

   没有滚动条
   <textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
   或<textarea style="overflow:hidden"></textarea>

3.设定窗口滚动条的颜色

设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果:
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">

 

 

通过JavaScript根据TextArea的内容动态调整TextArea的高度
 <script language="javascript" type="text/javascript"> 

function adjustObjHeight(obj, defaultHeight) { 
if(obj.scrollHeight > defaultHeight) { 
obj.style.height = obj.scrollHeight + 'px'; 
} else { 
obj.style.height = defaultHeight + 'px'; 
} 
} 
window.onload = function() { 
var obj = document.getElementsByTagName('textarea'); 
var len = obj.length; 
for(var i = 0; i<len; i++) 
adjustObjHeight(obj[i], 50); 
} 
</script> 

TextAreaHTML代码:

<textarea id="content" onkeyup="adjustObjHeight(this, 50);"></textarea>
 

 

分享到:
评论

相关推荐

    固定textarea文本域尺寸

    在你的案例中,只需将 `resize` 设置为 `none`,即可阻止用户改变 `textarea` 的大小。相关的CSS代码如下: ```css textarea { resize: none; } ``` 应用了这段CSS后,textarea元素将无法通过拖动边角来改变尺寸...

    基于jQuery的“autoresize”插件自动改变textarea大小

    为了解决这个问题,开发者通常会借助JavaScript库,如jQuery,来实现textarea的动态高度调整。本篇文章将详细介绍基于jQuery的"autoresize"插件,以及如何使用它来自动改变textarea的大小。 jQuery是一个广泛使用的...

    html中textarea的使用及常见问题及案例分析

    以下是关于 `textarea` 标签的详细讲解,包括其基本使用、常见属性、问题解析以及案例分析。 ### 基本使用 `&lt;textarea&gt;` 标签是成对出现的,以 `&lt;textarea&gt;` 开始,并以 `&lt;/textarea&gt;` 结束。它的主要功能是提供一...

    jQuery实现textarea自动增长宽高的方法

    在这些交互效果中,一个常见的需求是在用户输入时动态调整textarea(文本域)的大小,以适应内容的增多。传统的textarea组件在高度固定的情况下,一旦内容超出了设定的行数,就会出现滚动条,影响视觉效果和用户输入...

    js textarea自动下拉(带计数)图

    - **动态调整高度**:当用户输入内容时,计算新的高度,并设置给 textarea。 - **兼容性处理**:确保在不同浏览器和设备上都能正常工作。 #### 1.4 代码实现 ```javascript function autoAdjustHeight(textarea) { ...

    HTML+CSS+JavaScript原生购物网站首页案例

    此外,`&lt;a&gt;`标签用于链接,`&lt;img&gt;`标签用于展示图片,`&lt;form&gt;`标签用于创建表单,`&lt;input&gt;`、`&lt;select&gt;`、`&lt;textarea&gt;`等用于用户输入。 2. **CSS(Cascading Style Sheets)**:CSS负责网页的样式和布局。在这个...

    Qml实现的文本显示框(可指定某行高亮)

    在这个案例中,我们更倾向于使用`TextArea`,因为它提供更多的交互性和格式化选项。`TextArea`可以显示多行文本,并且可以通过调整其属性来定制显示效果。 ```qml import QtQuick 2.0 TextArea { id: textArea ...

    HTML学习资料及案例

    - 表单元素:`&lt;form&gt;`、`&lt;input&gt;`、`&lt;select&gt;`、`&lt;textarea&gt;`等,用于用户交互。 2. **CSS帮助文档**:CSS(Cascading Style Sheets)用于定义HTML元素的样式和布局。这份文档可能涉及: - 选择器:类选择器、ID...

    网页html开发经典案例,easy

    随着移动设备的普及,HTML5引入了媒体查询(`@media`),让网页可以根据屏幕尺寸调整布局,实现响应式设计。例如: ```html @media (max-width: 600px) { body { background-color: lightblue; } } ``` 在屏幕...

    【JavaScript源代码】javascript实现简单留言板案例.docx

    总之,这个JavaScript实现的简单留言板案例提供了一个基础的起点,开发者可以根据实际需求对其进行调整和优化,以满足更复杂的业务场景。对于初学者来说,这是一个很好的实践项目,可以帮助他们更好地理解和掌握DOM...

    KingEditor使用案例

    - **配置项调整**:可以设置各种配置项,例如上传路径、图片尺寸限制等,以适应服务器环境。 3. **实际应用案例**: - **博客系统**:在个人或企业博客中,KingEditor可以作为后台发布文章的编辑工具,让作者轻松...

    北大青鸟s1html贵美商城案例

    3. **图像处理**:学习`&lt;img&gt;`标签的使用,包括设置图片源(src)、alt属性(替代文本),以及如何调整图片尺寸。 4. **链接与导航**:理解`&lt;a&gt;`标签的作用,用于创建超链接,同时学习如何创建内部链接和外部链接,...

    flex第一步案例3-10

    2. **组件库**:Flex包含一个丰富的组件集,如Button、CheckBox、RadioButton、TextInput、TextArea等,用于快速构建UI。在“Chapter_3”中,可能详细介绍了如何使用这些组件以及它们的属性和方法。 3. **布局管理*...

    html简单网页制作,多个案例

    例如,使用color属性改变文本颜色,使用background-color设置背景色,使用font-family选择字体,使用padding和margin调整元素的内边距和外边距,使用display属性控制元素的显示方式,如block(块级元素)和inline...

    FCKeditor-2.3案例直接导入MYECLIPSE

    FCKeditor 2.3是其一个版本,它提供了丰富的功能,如字体样式调整、图像上传、链接管理等,极大地提升了网页内容编辑的便捷性和用户体验。 在MYECLIPSE中导入FCKeditor-2.3案例,可以让你更方便地进行项目开发和...

    html案例

    5. 响应式设计:随着移动设备的普及,HTML5引入了媒体查询(@media queries)等特性,使得网页可以根据不同的屏幕尺寸自动调整布局,实现响应式设计。 6. 表单元素:HTML表单用于用户输入,如`&lt;form&gt;`、`&lt;input&gt;`、...

    FCKEditor案例代码下载

    本案例代码下载是针对FCKEditor控件的使用教程,旨在帮助开发者更好地理解和应用这款编辑器。 在FCKEditorDemo这个压缩包中,你将找到一个示例项目,通过分析和运行这些代码,你可以了解到如何在自己的应用程序中...

    markdown(editor.md)编辑器及案例代码

    - `editormd.resize(width, height)`:手动调整编辑器大小。 同时,编辑器还提供了一系列的事件监听,如`onload`、`change`等,方便开发者进行交互处理。 ### 6. 案例实践 在实际应用中,你可以使用Editor.md构建...

    html学习的案例代码

    8. **响应式设计**:使用`, initial-scale=1"&gt;`来优化移动设备显示,结合CSS媒体查询(@media)实现不同屏幕尺寸下的样式调整。 9. **HTML5新特性**:HTML5引入了许多新的元素和功能,如`&lt;header&gt;`、`&lt;footer&gt;`、`...

    nicEditor案例

    在demo中,你可以看到如何通过简单的API调用来实现这些功能,比如`bkLib.onDomLoaded(function() { nicEditors.allTextAreas() })`,这行代码会在DOM加载完成后,将所有的textarea元素转换为nicEditor编辑器。...

Global site tag (gtag.js) - Google Analytics