el-input禁用键盘事件

以下是禁用el-input键盘事件的两种方法：

1. 给el-input添加readonly属性

<el-input v-model="inputNode.label" readonly></el-input>

2. 在input事件处理方法前添加一句document.activeElement.blur()

<el-input v-model="inputNode.label" @input="blurInput"></el-input>

methods: {
  blurInput() {
    document.activeElement.blur();
  }
}

相关问题

el-input禁用后能监听键盘事件吗

### el-input 组件禁用状态下的键盘事件监听

对于 `el-input` 组件，在其处于禁用状态下尝试监听键盘事件的行为取决于浏览器默认行为以及框架的具体实现方式。通常情况下，当一个输入组件被设置为禁用时，该组件不会接收任何用户交互操作，包括点击和键盘输入[^1]。

然而，Vue 和 Element UI 提供了一定程度上的灵活性来处理这些情况。尽管官方文档并没有明确指出可以在禁用状态下捕获键盘事件的方法，但从技术角度出发，仍然存在一些间接手段可以用来检测这种场景：

- **使用全局事件监听器**：可以通过在 document 或者 window 上添加键盘事件监听器，并结合当前聚焦元素的状态判断是否为目标的 `el-input` 组件。

document.addEventListener('keydown', function(event){
    let focusedElement = document.activeElement;
    if (focusedElement.classList.contains('is-disabled') && 
        focusedElement.tagName.toLowerCase() === 'input'){
      console.log("Disabled input detected key press:", event.key);
    }
});

需要注意的是这种方法并不是最佳实践，因为这可能会带来不必要的性能开销并影响用户体验。更推荐的做法是在设计应用逻辑时避免依赖于禁用字段内的直接用户输入作为触发条件[^2]。

<el-input-number v-model="value" :readonly="true"></el-input-number>无法变成只读模式

你可以添加 `disabled` 属性来禁用输入框，并将 `readonly` 属性设置为 `true` 来防止用户通过键盘输入：

<el-input-number v-model="value" disabled :readonly="true"></el-input-number>

这样用户就无法通过键盘或鼠标操作改变输入框的值，但是仍然可以通过 JavaScript 代码来更新 `value` 的值。如果你想完全禁用该输入框，可以将其包装在一个 `<div>` 中并将 `disabled` 属性设置为该 `<div>`，如下所示：

<div disabled>
  <el-input-number v-model="value" :readonly="true"></el-input-number>
</div>

这样用户无法通过任何方式改变输入框的值。