`
morning2008
  • 浏览: 112862 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

textArea的使用方法

阅读更多

textArea的使用方法:

1、cols,垂直列。在没有做样式表设置的情况下,它表示一行中可容纳下的字节数。例如cols=60,表示一行中最多可容纳60个字节,也就是30个汉字。另外要注意的是,文本框的宽度就是通过这个来调整,输入好cols的数值,然后再定义输入文字字体的大小(不定义的话,会采用默认值),那么文本框的宽度就确定了。



2、rows,水平列。表示可显示的行数,例如rows=10,表示可显示10行。超过10行,则需要拖动滚动条来浏览了。(同上,文本框的高度就是通过这个来控制的。)



3、name,文本框的名称,这项必不可省,因为存储文本的时候必须用到。



4、warp,当warp="off"表示该文本区域中不自动换行,当然不写默认是自动换行的。这个参数一般用得比较少。



5、style,这是个非常实用的参数,可以用来设置文本框的背景色,滚动条颜色及形式,边框色,输入字体的大小颜色等等。



6、class,一般用来调用外部css里边的设置。



例1:设置文本框的行数为40,列数为10。名称为text。表达形式 <textarea cols=40 rows=10 name=text></textarea>



例2:取消文本框右边的滚动条。表达形式<textarea cols=40 rows=10 name=text style="overflow:auto"></textarea>。style="overflow:auto"的意思就是当输入的文本超出设置的行数时才自动显示滚动条。



例3:设置文本框的背景色。<textarea cols=40 rows=10 name=text style="background-color:BFCEDC"></textarea>。



例4:另外设置文本框的滚动条颜色,边框色,以及字体大小,颜色,行距等,都可以直接在style里设置。不过这些一般都习惯在CSS里设置,直接调用就好了。下面是一段CSS设置代码:应该比较容易看懂,textbox里边依次设置的是文本框的背景色,上下左右边框色和厚度,以及输入字体的大小等。




<style>
.textbox { BACKGROUND: #BFCEDC; BORDER-TOP: #7F9DB9 1px solid; BORDER-LEFT: #7F9DB9 1px solid; BORDER-RIGHT: #7F9DB9 1px solid; BORDER-BOTTOM: #7F9DB9 1px solid; FONT-FAMILY: "宋体", "Verdana", "Arial", "Helvetica"; FONT-SIZE: 12px; TEXT-ALIGN: LIFT;}
</style>





把上面一段代码插到页面的<head>与</head>之间。调用方式:<textarea cols=40 rows=10 name=text class="textbox"></textarea>。 class=""中的名字对应css里边要用到的设置的名字。



note that:
textarea的cols和rows就相当于width和height,但是单位不同,所有不能精确地做调整,而style.width和style.height就可以按像素单位准确调整,并且优先级高于cols和rows。

分享到:
评论

相关推荐

    textarea,textbox高亮关键字

    最近开发的时候做了textarea 高亮关键字,尝试过很多方法,比如用iframe,和编辑器替换,当然这也是一个方法,但是原来是用textbox的内容要达到兼容这两种方法是做不到的,所以这里是使用jquery插件和jquery核心文件搞的...

    textarea输入限制方法

    textarea输入限制方法,此方法使用js来控制输入数据最大值,也限制了复制粘贴输入、鼠标拖放输入。

    flex解决textarea,input不能输入中文的方法

    解决Flex在非主应用程序中,textarea和input不能输入中文的 方法。

    layui 富文本编辑器和textarea值的相互传递方法

    今天小编就为大家分享一篇layui 富文本编辑器和textarea值的相互传递方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    微信小程序textarea层级过高的解决方法

    由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验, 目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 ...

    微信小程序 textarea 详解及简单使用方法

    解决方法:结合from表单,textarea文本框输入后,再去点击提交按钮,这时会先执行textarea事件(获取文本框输入内容),再去执行数据提交,这样问题就解决了 wxml文件代码: &lt;form bindsubmit=evaSubmit&gt; &...

    textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法

    要设置textarea文本域的滚动条是否开启,使用style.overflow-x属性来控制。如:如果要隐藏该文本域的横向滚动条,在style属性中增加overflow-x属性控制,如下: &lt;textarea id=txtComments style="overflow-x:...

    textarea去除多余空格和回车的方法及其属性

    使用textarea的标签时候发现多了空格或者’\n‘,后来发现是标签的位置错了 以下是错误示范: 你好 以下是正确示范: 你好 关键在于与要在同一行,不然他们之间的部分都计入(包括回车’\n‘,空格) 2.的属性 ...

    js操作textarea 常用方法总结

    在DOM里面操作textarea里面的字符,是比较麻烦的,本文将介绍一种比较简单的方法,需要的朋友可以参考下

    PHP使用preg_split和explode分割textarea存放内容的方法分析

    主要介绍了PHP使用preg_split和explode分割textarea存放内容的方法,结合实例形式分析preg_split和explode函数的功能、使用技巧与文本字符串分割过程中的相关注意事项,需要的朋友可以参考下

    jQuery替换textarea中换行的方法

    本文实例讲述了jQuery替换textarea中换行的方法。分享给大家供大家参考。具体分析如下: 昨天同事在学习jQuery的时候,希望使用替换掉textarea中的换行。 html部分: &lt;textarea id="ncontent"&gt;&lt;/...

    使用CSS禁止textarea调整大小功能的方法

    如果你使用谷歌浏览器或火狐浏览器,你会发现页面上的textarea元素的右下角有个小三角,用鼠标箭头拖拽它,你的textarea就能随着放大或缩小。这是现代浏览器为方便用户而添加的一个辅助功能(很遗憾,不包括IE,如果...

    js判断终端类型、textarea根据内容自适应高度

    里面包含了两个javascript方法,一个是判断终端类型的,根据userAgent判断访问网页的是什么类型的终端 第二个方法,是使textarea根据内容的多少,自动设置相应的高度,使文字不被隐藏

    JS给Textarea文本框添加行号的方法

    本文实例讲述了JS给Textarea文本框添加行号的方法。分享给大家供大家参考。具体如下: 这里使用JS实现让Textarea文本框显示行号的功能,每一行的前面都会有下数字序号,如果用来显示代码的话,可以直接找到某一行,...

    jQuery往textarea中光标所在位置插入文本的方法

    本文实例讲述了jQuery往textarea中光标所在位置插入文本的方法。分享给大家供大家参考。具体实现方法如下: &lt;html&gt; &lt;head&gt; [removed][removed] [removed] $(function() { /* 在textarea处插入文本--...

    在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法

    有的时候黄色边框很影响页面效果,并且textarea拖动改变大小之后直接影响布局,所以为了不使这些多余的功能和效果影响页面,可以使用一下几句CSS清除掉chrome浏览器的默认效果,代码如下: 取消表单项聚焦时产生的...

    JavaScript 监听textarea中按键事件

    ”,并定义以下方法。 代码如下: var keypress = function(e){ var e = e || window.event; var k = e.keyCode; } 这里我使用的办法是JQuery。 代码如下: $(“#text”).bind(“keyPress”,function(event){ var k = ...

    angularjs使用div模拟textarea文本框的方法

    &lt;div class=simulate-textarea ng-model=view.text contenteditable=true placeholder=请输入内容&gt; Angularjs指令: /** * div模拟textarea输入框双向数据绑定指令 */ .directive('contenteditable', ...

Global site tag (gtag.js) - Google Analytics