el-input输入失去焦点事件能获取到输入的内容吗

### Vue 中 `el-input` 组件失去焦点事件 `blur` 的使用方法 在 Vue.js 和 Element Plus 或者 Element UI 框架中，`el-input` 是一个常用的表单组件。该组件支持多种事件，其中 `blur` 事件表示当输入框失去焦点时触发。 #### 基本语法 可以通过监听 `blur` 事件来处理输入框失去焦点的情况。以下是基本的实现方式： ```vue <template> <div> <!-- 正常输入框 --> <el-input v-model="inputValue" @blur="handleBlur" placeholder="请输入内容"> </el-input> <!-- 文本区域 --> <el-input type="textarea" v-model="textareaValue" @blur="handleTextareaBlur" placeholder="请输入多行文本"> </el-input> </div> </template> <script setup> import { ref } from 'vue'; const inputValue = ref(''); const textareaValue = ref(''); // 输入框失去焦点时调用的方法 const handleBlur = (event) => { console.log('普通输入框失去焦点:', event.target.value); }; // 文本区域失去焦点时调用的方法 const handleTextareaBlur = (event) => { console.log('文本区域失去焦点:', event.target.value); }; </script> ``` 以上代码展示了如何为普通的 `el-input` 和带有 `type="textarea"` 属性的 `el-input` 添加 `blur` 事件监听器[^2]。每当用户点击其他地方使输入框失去焦点时，对应的回调函数会被执行。 --- #### 结合自定义逻辑的应用场景 假设需要在用户离开输入框时自动修剪（去除首尾空白字符），可以结合指令或手动处理完成此功能。以下是一个基于 `blur` 事件的简单示例： ```vue <template> <div> <el-input v-model="inputValue" @blur="trimOnBlur" placeholder="请输入并测试失去焦点后的效果"> </el-input> </div> </template> <script setup> import { ref } from 'vue'; const inputValue = ref(''); // 自动修剪输入值 const trimOnBlur = () => { inputValue.value = inputValue.value.trim(); console.log('失去焦点后已修剪的值:', inputValue.value); }; </script> ``` 在这个例子中，每次用户从输入框移开鼠标或其他交互行为导致其失去焦点时，都会触发 `trimOnBlur` 方法，从而清理掉多余的空格[^3]。 --- #### 动态获取光标位置 如果还需要知道光标的具体位置以便进一步操作，则可以在 `blur` 事件中访问原生 DOM 元素的相关属性。例如，在某些情况下可能希望保留用户的编辑状态而不破坏当前选区范围。 对于标准输入框和多行文本框分别有如下两种情况下的解决办法: 1. **针对普通输入框** ```javascript const getCursorPositionForInput = () => { const inputElement = document.activeElement; if (inputElement.tagName === 'INPUT') { return inputElement.selectionStart; } return null; }; ``` 2. **针对多行文本框 (`textarea`)** ```javascript const getCursorPositionForTextarea = () => { const textareaElement = document.activeElement; if (textareaElement.tagName === 'TEXTAREA') { return textareaElement.selectionStart; } return null; }; ``` 实际应用时可将这些辅助工具封装成更通用的形式供多次复用[^4]。 --- ### 总结 通过上述介绍可以看出，利用好 `el-input` 提供的基础 API 可以轻松应对大多数日常开发需求；而深入理解其内部机制则有助于构建更加灵活高效的用户体验设计方案。

可以在el-input上添加一个blur事件，在事件中获取输入的值并去除开头和结尾的空格后再赋值给v-model所绑定的属性。代码如下： ``` <el-input v-model.trim="name" @blur="trimName"></el-input> ... methods: { trimName() { this.name = this.name.trim(); } } ``` 其中，v-model后面加上.trim，表示自动去除开头和结尾的空格。@blur为el-input的失焦事件，在失焦时调用trimName方法，将输入的值去除空格后再赋值给name。 这样实现后，当输入姓名信息完毕，焦点失去时，输入内容的开头和末尾空格将自动被去除。