HTML属性,那些常用、不常用和没啥用的

博客将内容分为常用、不常用和没啥用三类,但未明确具体内容。
常用的:
属性描述
class
id唯一id
style内联样式
title额外信息
data-*私有定制数据
hidden是否可见,布尔值
centered 文本居中right-aligned 文本居右
不常用的:
属性描述
draggable元素是否可拖动
dropzone拖动数据时,是否进行复制、移动、链接
contenteditable元素内容是否可编辑
dir文本方向
lang语言
tabindextab次序
没啥用的:
属性描述
contextmenuonly for firefox
accesskey快捷键
spellcheck拼写检查
translate是否翻译
根据你的反馈,似乎之前的建议没有解决问题。我们进一步深入分析并提供更具体的解决方案。 ### 代码概述 你提到的是 `el-input` 组件在点击输入框时无法获取焦点,但点击标签(如“卫星名称”)时可以获取焦点。这通常是由于事件冒泡、样式覆盖或组件属性配置当引起的。 ### 代码解析 1. **事件冒泡问题**: - 检查父级容器是否有阻止默认行为的事件监听器。例如,`event.preventDefault()` 或 `event.stopPropagation()` 可能会阻止输入框获取焦点。 2. **样式覆盖问题**: - 确认 `el-input` 是否被某些 CSS 规则覆盖,导致其可点击。尤其是检查 `z-index`、`pointer-events` `position` 属性。 3. **组件属性配置问题**: - 确认 `el-input` 组件的属性是否配置正确,例如 `readonly` 或 `disabled` 属性是否误设为 `true`。 ### 建议的具体操作 1. **检查父级容器的事件监听器**: ```javascript // 确保父级容器没有阻止默认行为的事件监听器 <div @click.stop="handleClick"> <el-input v-model="form.name"></el-input> </div> ``` 2. **检查样式覆盖**: - 使用浏览器开发者工具检查 `el-input` 的样式,确保没有正常的样式覆盖。 - 尝试添加一个临时样式来确认问题是否与样式有关: ```css .el-input { pointer-events: auto !important; z-index: 1000 !important; } ``` 3. **确认组件属性**: - 确保 `el-input` 没有被错误地配置为只读或禁用状态: ```html <el-input v-model="form.name" :readonly="false" :disabled="false"></el-input> ``` ### 知识点 1. **Vue 事件修饰符**:了解如何使用 `.stop`、`.prevent` 等修饰符来控制事件传播。 2. **CSS 样式调试**:掌握使用浏览器开发者工具调试样式的方法,确保没有样式冲突。 3. **Vue 组件属性**:熟悉 `el-input` 组件的常用属性及其作用,确保正确配置。 希望这些建议能帮助你解决问题。如果仍有疑问,请提供更多代码片段或详细描述,以便进一步诊断。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值