element-ui select 获取焦点时，光标移到文字最后

最新推荐文章于 2025-06-20 16:42:56 发布

csdn产品小助手

最新推荐文章于 2025-06-20 16:42:56 发布

阅读量1.3w

点赞数

CC 4.0 BY-SA版权

文章标签： ui javascript ViewUI

原文链接：https://juejin.im/post/5cc148e16fb9a0322c42917c

这篇博客介绍了如何解决Element-UI的select组件在获取焦点时，默认显示选中状态的问题，目标是使光标停在输入文字的最后。通过调整代码，成功实现了预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：element-ui select 可搜索组件默认 focus 的时候，会呈现选中状态，怎么才能取消选中状态，让光标停留在文字最后？

默认效果：

目标效果：

代码如下：

<el-select v-model="value" filterable placeholder="请选择" @click.native="change" id="select">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>复制代码

options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''复制代码

change () {
      $("#select").css("display","inline").val('');
      $("#select").get(0).focus();
    },复制代码

ok！～大功告成！

参考链接