(clicktop public public number, you can quickly follow)
Author: Zhang Xinxu
URL: http://www.zhangxinxu.com/wordpress/2016/02/html-textarea-rows-height/
1. About the cols and rows attributes of the textarea element
The <textarea> element, commonly known as "text field" or "multi-line text box", has its own native HTML attribute rows to represent rows, which can change the height of the visual area of <textarea>, and cols to represent columns. Change the width of the visible area of <textarea>. For example:
<textarea></< /span>textarea>
<textarea cols= '30' rows='5'></textarea>
It will be found that the size below is obviously larger than that without cols and rows attribute values.
Here comes the following question. I think many friends know that cols and rows can affect the size of the text field. Is there any relationship between the different values of cols and rows and the final pixel size displayed? Can it be calculated by formula? Is the final performance affected by other CSS properties?
I think that few people know about the above problems, including me, before writing this article, I also had a vague understanding.
Now I’m going to talk nonsense. When I write this article, I am actually lonely in my heart. This feeling is very similar to the experience of going to the wilderness alone to find a fishing ground. You know there is a river ahead, but you don’t know whether it is suitable for fishing there. If you want to know the result, you need to confirm it yourself. However, no one has passed before the road to the river bank, that is to say, there is no road, and what stands in front of you is a barren grass that is as high as a person. They are so high and so far away that they seem to have no end in sight. What danger, poisonous snakes and wild boars may appear at any time. However, following my passionate heart, I resolutely went to explore the unknown road. The grass and trees grow so densely that I can only push them away with my hands and step on my feet to move forward. They have barbs The stems and vines, the blade-like leaves, leave scars on your hands and faces. When you are halfway forward, and you are in the middle of the whole wild grass field, there is no one around, only a gentle wind wipes the intertwined grass and leaves. Suo Suo, a feeling of loneliness arises spontaneously. At this moment, no matter how strong my heart is, I will hesitate, should I continue to move forward...
Yes, should I move on! ? Recently, there is a sentence that has had a great impact on my heart, and it has been mentioned repeatedly, that is, "What is your purpose for doing this?"
"Please, don't be so utilitarian, don't be so tired, okay, I just pursue my heart, and I just do it because of my interest!" My first reaction in my heart was like this.
However, when I suddenly looked up and found that there was no one around and was full of thorns, I would hesitate in my heart. For example, this article, if you insist on utilitarianism and purpose, it is really nothing, is it worth it? Does anyone care? Is it worth the time spent? Why do something that no one cares about? Why not focus on trendy stuff that will help your project? Why do you have to walk alone among the thorns when others are flying in the sky? (Video below: Passers-by write their biggest regret in life on the street blackboard)
So, go all out, I will continue my progress, cross the grass that I have never crossed, go to the river that calls and wait, and find the virgin fishing land that I yearn for.
Second, cols attribute value and width
You can click here: textarea text field cols attribute and width relationship demo (http://www.zhangxinxu.com/study/201602/textarea-cols-width.html)
The interface is as follows:
We can choose to drop down to modify the text size, font, and character spacing of the text field to see if it will affect the width of the text field. The results and conclusions are as follows:
Chrome th> | IE | FireFox | |
---|---|---|---|
font-size | √ | √ | √ |
font-family | × | × | √ |
letter-spacing | × | √ | √ |
It can be seen that the Chrome browser is only affected by the character size, and ignores the font and character spacing; while the FireFox browser affects each of them; and the IE browser is not affected by the character spacing.
Then comes the most concerned question, is there any relationship or formula between the value of cols and the width of the final display?
In the simsun font, that is, Song Ti, we can easily see the relationship between:
Chrome: 8px * cols + 17px
IE: 8px * cols + 17px
FireFox: 8px * cols + 29px
Since CSS and HTML were invented by foreigners, the relative width of each unit of cols is relative to English characters. In Song typeface, it can be considered as 8px, and the latter 17px is actually easy to understand, indicating the scroll bar. width. Under the window system, by default, the width occupied by the scroll bars of all browsers is 17 pixels. Therefore, for Chrome and IE browsers, the final width of the text field (not considering the padding and border size for now) is the single character width * cols value + scroll bar width. However, under the FireFox browser, the increased width is 29px, so it is not clear what 29px is.
Under IE browser, if the overflow attribute value of <textarea> is hidden, there will be no 17px added later, while other browsers do not have this phenomenon.
Then, when we use other fonts, the final width performance is more subtle. Therefore, the unit corresponding to a single cols is not an integer, it may be 8.1px or 7.7px~7.8px.
To sum it up:
It seems that it is of practical value only under the Chrome browser, because the width fluctuations under other browsers are too obvious, and any other environment changes will cause the width to be different, which is actually very bad in web page layout. Because the webpage is top-down, the height can be very long, but the width is generally fixed, the resources are relatively tight, and the layout is required to be precise. Therefore, once the width is different in each browser, it is bound to Greatly affect its practical value. Therefore, in the actual web production, unless the width requirements are not high, the CSS width attribute is still used to control the width of the text field at other times.
3. Rows attribute value and height
You can click here hard: textarea text field rows attribute and height relationship demo
The interface is as follows:
We can choose to drop down to modify the text size, font and line height of the text field to see if it will affect the height of the text field. The results and conclusions are as follows:
Chrome | IE | FireFox | |
---|---|---|---|
font-size | × | √ | × |
font-family | × | √ | × |
line-height | √ | × | √ |
It can be seen that the Chrome browser and the FireFox browser are only affected by the size of the line height, and ignore the font and character size; while the IE browser is completely opposite, turning a blind eye to the line-height line height, but it does not care about the character size and character size. Fonts matter.
Then comes the most concerned question, is there any relationship or formula between the value of rows and the height of the final presentation (not considering the influence of padding and border first)?
In the Chrome browser, the final height is the product of the value of rows and line-height. As shown in the demo screenshot above, when the rows value is 2 and the line-height is 20px, the final height is 40px, which is their product.
It is similar under the FireFox browser, but there is a difference, that is, the height needs to be calculated with the size of the scroll bar, so the following scene is 17px higher than the Chrome browser:
Under the IE browser, the height has nothing to do with the line height, it is more determined by the height of the content area with text (the concept in the inline box model), because when different fonts are switched, the height will also become higher, for example, using Microsoft The Yahei font will become taller obviously, and the height of the content area of Microsoft Yahei is higher than that of ordinary fonts. Therefore, in order to determine the relationship between the height of the text field and the characters, the key is to determine the calculation coefficient: height=rows*coefficient. For example, the 16px Microsoft Yahei font has a coefficient of approximately 21 (see the figure below), and Song Ti simsun is between 18.2 and 18.5.
To sum it up:
Compatibility is still a mess, no two browsers behave exactly the same. But in the end, the performance design is a little bit better than cols. The more critical issue is that the height is generally not so strict, so sometimes we don't want to re-create the CSS to confirm the height of the text field, and it is also possible to use the rows attribute value to do it.
Fourth, the final conclusion
The result of the final research is that the compatibility is very poor, and the cost of wanting to perform exactly the same under each browser is very high. Therefore, if you have strict requirements on the layout of the text field, use the CSS width/height property for precise control.
The only gain is that I know how different browsers are compatible, as well as the calculation method of the final size presentation, related factors, etc., which may provide a different idea for the realization of a certain function in the future!
En, that's all!
(End of this article)
【Today's WeChat official account recommendation ↓】
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Research%20on%20relationship%20between%20HTML%20textarea%20colsrows%20attribute%20and%20width%20and%20height.html
评论列表(196条)
测试