textarea去掉右侧滚动条,去掉右下角拖拽

本文介绍了如何通过样式设置去除 HTML 中 textarea 的滚动条及拖拽功能,同时深入探讨了 textarea 的 wrap 属性,包括其不同取值的意义及对文本处理的影响。

转:https://blog.youkuaiyun.com/jiangxindu1/article/details/42298351

一:textarea去掉右侧滚动条,去掉右下角拖拽

代码: <textarea style= "overflow:hidden; resize:none; "> </textarea>

二:HTML <textarea> 标签的 wrap 属性

以下面这个例子为例,将 60 个字符的文本输入到一个 40 个字符宽的文本区域内:
word wrapping is a feature that makes life easier for users.

如果设置为 wrap="wrap",文本区会包含一行文本,用户必须将光标移动到右边才能看到全部文本,这时将把一行文本传送给服务器。

如果设置为 wrap="virtual",文本区会包含两行文本,并在单词 "makes" 后面换行。但是只有一行文本被传送到服务器(ps:就是传到服务器的时候还是一整行,并没有像显示的那样,包含有换行字符,在服务器端不包含换行符)。

如果设置为 wrap="physical",文本区会包含两行文本,并在单词 "makes" 后面换行,这时发送给服务器两行文本,单词 "makes" 后的新行字符将分隔这两行文本。

### 隐藏 `el-input textarea` 的滚动条右下角标记 在 Element Plus 中,`el-input` 组件的 `textarea` 类型可以通过自定义样式隐藏滚动条右下角的调整大小标记。以下是一个完整的解决方案: #### 隐藏滚动条 通过设置 `overflow: hidden;` 和 `resize: none;` 可以禁用滚动条和调整大小功能[^1]。 ```css .el-textarea__inner { resize: none; /* 禁用调整大小功能 */ overflow: hidden; /* 隐藏滚动条 */ } ``` #### 隐藏右下角拖拽图标 在某些浏览器中(如 Chrome 和 Safari),即使设置了 `resize: none;`,右下角拖拽图标仍然可能显示。为确保完全隐藏该图标,可以结合 `::-webkit-resizer` 伪元素进行处理[^2]。 ```css .el-textarea__inner { resize: none; /* 禁用调整大小功能 */ overflow: hidden; /* 隐藏滚动条 */ } /* 隐藏 WebKit 浏览器中的拖拽图标 */ .el-textarea__inner::-webkit-resizer { display: none; } ``` #### 示例代码 以下是一个完整的示例,展示如何在 `el-input` 的 `textarea` 中隐藏滚动条右下角标记: ```vue <template> <el-input type="textarea" v-model="value" /> </template> <script> export default { data() { return { value: "这是一个示例文本", }; }, }; </script> <style> .el-textarea__inner { resize: none; /* 禁用调整大小功能 */ overflow: hidden; /* 隐藏滚动条 */ } /* 隐藏 WebKit 浏览器中的拖拽图标 */ .el-textarea__inner::-webkit-resizer { display: none; } </style> ``` #### 注意事项 - 如果需要兼容其他浏览器(如 Firefox),请测试上述样式的效果,并根据需要添加额外的前缀或属性。 - 在某些情况下,如果内容超出 `textarea` 的高度,隐藏滚动条可能导致部分内容不可见。建议根据实际需求调整组件的高度或启用动态调整功能。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值