Firefox中Textarea的innerText属性不可用问题

test.html:

<form>

<input type="hidden" name="_D_V_NTC_CTT" value="里親野先生からメールが届けました、嬉しかったですね。





里親野先生からメールが届けました、嬉しかったですね。





里親野先生からメールが届けました、嬉しかったですね。"/><span class="ReadonlyAttribute"  style="height: 143" style="width: 566"">里親野先生からメールが届けました、嬉しかったですね。

<br>

<br>

<br>里親野先生からメールが届けました、嬉しかったですね。

<br>

<br>

<br>里親野先生からメールが届けました、嬉しかったですね。</span>

<br>

<script language=javascript>

function show_help_page(){

  window.open("./help.html",

  "お問い合わせ",  "height=450,width=850,top=100,left=100,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes,location=no,status=yes");

}</script>

<input type="button" value="test" onclick="show_help_page()">

</form>

help.html:

<html>

<body>

<form >

<textarea name="textarea" id="TEXTAREA_NTC_CTT" STYLE="overflow:hidden " STYLE="border:0" cols="60" STYLE="font-size: 100%;" READONLY = "readOnly" border = 0> </TEXTAREA>

</form>

</body>

<script language=javascript>

window.onload=function(){

	var textarea = document.forms[0].TEXTAREA_NTC_CTT;

	if(window.navigator.userAgent.indexOf("MSIE")>=1) { 

		textarea.innerText = window.opener.document.forms[0]._D_V_NTC_CTT.value; 

		textarea.style.posHeight=textarea.scrollHeight; 

	} else { 

		textarea.textContent=window.opener.document.forms[0]._D_V_NTC_CTT.value;

		textarea.style.height=textarea.scrollHeight; 

	} 

}

</script>

</html>
是的,**`<el-input>` 中 `textarea` 和普通 `input` 在 `disabled` 状态下的样式确实一样**,即使使用相同的 `disabled` 属性,视觉表现也会有差异。 --- ### ✅ 问题确认 你观察到的现象是正确的: | 对比项 | 普通 input(text/number等) | textarea | |-------|-----------------------------|---------| | 背景色 | 浅灰色背景(明显禁用感) | 可能更亮或接近白色 | | 字体颜色 | 变灰、变淡 | 可能保持黑色或稍淡 | | 边框样式 | 灰色边框 | 可能仍保留一定饱和度 | | 整体禁用感 | 强烈 | 较弱,看起来像“只是能编辑” | --- ## 🔍 原因分析:Element UI 默认样式差异 Element UI 对 `.el-input__inner`(input)和 `.el-textarea__inner`(textarea)设置了同的 `disabled` 样式规则。 ### 📦 查看默认 CSS(以 Element UI 2.x 为例) ```css /* 普通 input disabled */ .el-input.is-disabled .el-input__inner { background-color: #f5f7fa; border-color: #e4e7ed; color: #c0c4cc; cursor: not-allowed; } /* Textarea disabled */ .el-textarea.is-disabled .el-textarea__inner { background-color: #ffffff; /* 注意:这里可能是白色! */ color: #c0c4cc; cursor: not-allowed; } ``` 👉 **关键点**: - `textarea__inner` 的 `background-color` 没有被强制设为浅灰,**可能继承父级或保持白色**; - 导致它看起来“没被禁用”,用户体验一致 ❌ --- ## ✅ 解决方案:统一 disabled 样式 ### ✅ 方案一:全局 CSS 统一风格 ```css /* 统一所有 el-input 和 el-textarea 的 disabled 样式 */ .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner { background-color: #f5f7fa !important; border-color: #e4e7ed !important; color: #c0c4cc !important; opacity: 1 !important; /* 防止某些主题下透明度过低 */ } ``` > 💡 加 `!important` 是因为 Element UI 使用了内联样式优先级较高。 --- ### ✅ 方案二:Scoped CSS 中穿透修改(Vue 单文件组件) ```vue <style scoped> ::v-deep(.el-input.is-disabled .el-input__inner), ::v-deep(.el-textarea.is-disabled .el-textarea__inner) { background-color: #f5f7fa !important; border-color: #e4e7ed !important; color: #c0c4cc !important; } </style> ``` 或者 Vue 3 + `<style scoped>` 使用 `:deep()`: ```vue <style scoped> :deep(.el-input.is-disabled .el-input__inner), :deep(.el-textarea.is-disabled .el-textarea__inner) { background-color: #f5f7fa !important; border-color: #e4e7ed !important; color: #c0c4cc !important; } </style> ``` --- ### ✅ 方案三:自定义 class 控制 ```vue <el-input v-model="text" :disabled="isDone" class="unified-disabled" /> <el-input type="textarea" v-model="desc" :disabled="isDone" class="unified-disabled" /> ``` ```css .unified-disabled.is-disabled ::v-deep(.el-input__inner), .unified-disabled.is-disabled ::v-deep(.el-textarea__inner) { background-color: #f5f7fa !important; border-color: #e4e7ed !important; color: #c0c4cc !important; } ``` --- ## ✅ 补充建议 ### 1. 禁用时光标也应统一为 `not-allowed` ```css .el-input__inner, .el-textarea__inner { cursor: not-allowed !important; } ``` ### 2. 如果用了暗色主题?需自定义配色 ```css .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner { background-color: #2a2e33 !important; border-color: #4a4d52 !important; color: #878c94 !important; } ``` --- ## ✅ 总结 | 问题 | 原因 | 解法 | |------|------|------| | `textarea` 和 `input` disabled 样式同 | Element UI 默认样式未统一 | 手动覆盖 CSS | | `textarea` 看起来没禁用 | 背景仍是白色 | 强制设为 `#f5f7fa` | | 字体颜色一致 | `color` 继承问题 | 显式设置 `color: #c0c4cc` | | scoped 样式无效 | 深层组件未生效 | 使用 `::v-deep` 或 `:deep()` | --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值