关于textarea元素的cols和rows属性

2019-09-10 郑州网站建设  

<textarea>元素,俗称“文本域”,或者“多行文本框”,其自带原生的HTML属性rows表示行的意思,可以改变<textarea>的可视区域高度,cols表示列,可以改变<textarea>的可视区域宽度。例如:

<textarea></textarea>

<textarea cols="30" rows="5"></textarea>

会发现,下面的尺寸明显比没有colsrows属性值的要大。

下面问题来了,我想很多小伙伴知道colsrows可以影响文本域的尺寸,那colsrows不同的数值和最终展示的像素尺寸之间有没有什么关系呢?可不可以通过公式计算呢?最终表现是否还受到其他CSS属性的影响呢?

二、cols属性值和宽度

界面如下:

我们可以选择下拉修改文本域的文字尺寸,字体以及字符间距等,看看会不会对文本域的宽度造成影响。结果结论如下:

 

 

Chrome    IE      FireFox

font-size           

font-family        ×     ×    

letter-spacing  ×         

 

可以看见,Chrome浏览器只受到字符大小影响,对字体和字符间距视而不见;而FireFox浏览器则每一个都会影响之;而IE浏览器不受字符间距影响。

 

那最关心的问题来了,cols的值和最终呈现的宽度有没有什么比如的关系或者公式呢?

 

simsun字体,也就是宋体下,我们可以很容易得看出之间的关系为:

 

Chrome: 8px * cols + 17px

IE: 8px * cols + 17px

FireFox: 8px * cols + 29px

 

由于CSS,HTML这些东西是老外发明的,因此,cols每个单位相对的宽度是相对于英文字符而言的,在宋体下,可以认为是8px,后面的17px其实很好理解,表示滚动条的宽度。在window系统下,默认,所有浏览器的滚动条所占据的宽度都是17像素。所以,对于ChromeIE浏览器而言,文本域最终的宽度(paddingborder尺寸暂不考虑)就是单字符宽度*cols+滚动条宽度。然而,FireFox浏览器下,增加的宽度是29px,这个不就搞不清晰问什么是29px了。

 

IE浏览器下,如果<textarea>overflow属性值为hidden, 则没有后面增加的17px,而其他浏览器没有此现象。

 

然后,当我们使用其他字体的时候,最终的宽度表现则比较微妙了。因此,单个cols对应的单位就不是整数了,可能是8.1px也有可能是7.7px~7.8px这样子的。

 

总结一下就是:


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1893.html转载请标明出处,谢谢合作!
标签:
  • 元素
  • textarea
  • textareacols