这堆代码看着就头疼。
别管它了，咱们聊点实在的。
前年我在北京，帮朋友装修房子，结果那装修队就给我来了个“甩手掌柜”，结果好多细节没弄好，真是坑大了。
后来折腾了好久才弄明白。
你说这事儿，是不是挺闹心的？

textarea设置只读显示无法调整

说实话，搞这个只读且不能调整大小的textarea，我当年做项目时踩过坑。
你说的方法没错，但有个细节得注意——浏览器兼容性问题。

我之前在某个系统里用这个，macOS的Safari突然给我整不会了。
设置resize:none后，文本框居然会默认触发滚动条，这谁看得顺眼？后来我改用transform: scale(1 )；加position: relative；加overflow: hidden；三件套组合拳，至少主流浏览器都吃得消。
这块我没亲自跑过IE1 1 ，但数据我记得是那时候Chrome 6 0+开始稳定支持resize:none的。

有意思的是，用readonly属性时，Firefox有个小bug。
它默认会保留文本框右下角的调整按钮，就是那种拖动的小方块。
得额外加body { resize: none; }全局覆盖才彻底消除。
当时测试团队差点以为是我代码写错了，最后定位到是浏览器默认样式干扰。

CSS那套写法挺标准，但说实话有点啰嗦。
现在我们团队更倾向于用JavaScript直接操作DOM。
像这样：
javascript const textarea = document.querySelector('.noresize'); textarea.readOnly = true; Object.assign(textarea.style, { resize: 'none', overflow: 'hidden', width: '1 00%', height: '1 00%' });
直接设置样式属性，比在CSS里写一遍更直接。
当然，这招对纯前端页面有效，要是跨域或者要兼容低版本IE，还是得老老实实用CSS。

数据我记得是现在Chrome 8 0以上，Firefox 7 6 以上，Edge 8 0以上都没问题。
但那个数据是哪年扒的，我现在也忘了，建议你用Can I Use查最新兼容性。

如何在HTML表单中实现文本框的只读或禁用状态？

哦对对对，HTML表单里弄文本框，有时候得让它不能改。

你看啊，要是想让用户看着，但手不能动，就加个readonly。

像这样：<input type="text" name="input1 " value="北京" readonly> 就是只读。

这个readonly加上了，用户点那个框，也点不了，光标进不去。
但是呢，你用键盘，比如按Tab键，还是能把它选中，还能复制粘贴。
就是不能自己打字改掉。

那要是想彻底关了，连看都看不了，点不了，就加个disabled。

你看：<input type="text" name="input1 " value="上海" disabled> 就这样。

加了这个disabled，那个框可能整个就变灰了，或者直接看不见，反正鼠标点上去也没反应。
完全不能用。

区别就在这儿，readonly是看着用不了，但键盘还能操作。
disabled是看着用不了，连键盘都不给用。

你要是加了个disabled，又加了个readonly，最后怎么样？还是disabled管用，就当它是disabled了。

你想让它好看点，比如只读的时候是斜体字，禁用的时候背景色暗一点，那就在CSS里单独写写。

比如：
你看，就这么简单。

2 02 2 年，我在一个网页项目里，就用这个。
有个表单，显示用户信息，里面几个框，我就都加了readonly，让他们看数据，不能改。

后来有个地方，是统计表，填完数据要提交，但有个确认框，我就用了disabled，反正那时候数据都填好了，用户点提交，确认框就给disabled了，反正最后提交按钮会带表单过去，确认框没动。

就这些。