element input输入框自动获取焦点的实现

2024-10-10 02:52:21

最近项目中在做表单的时候，需要自动滚动到评论框，并且让评论框自动聚焦，这就需要手动触发输入框的 focus 状态。

但是，element并不支持autofocus属性，那就只能通过原生的js效果获取聚焦效果了

document.getElementById("input").focus();

或者利用vue的ref属性也可以实现聚焦效果：

原理其实很简单，Element 已经提供了 focus 方法，但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性，然后在需要的地方直接调用方法就可以了

<el-input v-model="input" placeholder="请输入内容" ref="input"></el-input>

this.$nextTick(() => {
      this.$refs.input.focus()
    })

注意：一个页面只能有一个聚焦效果

last , vue也支持自定义指令

当页面加载时，该元素将获得焦点 (注意：autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
    // element-ui
    el.children[0].focus()
    // 元素有变化，如show或者父元素变化可以加延时或判断
    setTimeout(_ => {
      el.children[0].focus()
    })
  }
})

参考：vue自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html

到此这篇关于element input输入框自动获取焦点的实现的文章就介绍到这了,更多相关element input输入框自动获取焦点内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Element Input输入框的使用方法

本文来源于Element官方文档: http://element-cn.eleme.io/#/zh-CN/component/input 基础用法带图标的输入框(属性方式) <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input2"> </el-input> <el-input placeholder="请输入内容&q
vue element-ui实现input输入框金额数字添加千分位

在util.js中定义方法包含金额添加过滤千分位,验证金额格式等 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split('.'); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = str[0].replace(re, "$&,");
element input输入框自动获取焦点的实现

最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的 focus 状态. 但是,element并不支持autofocus属性,那就只能通过原生的js效果获取聚焦效果了 document.getElementById("input").focus(); 或者利用vue的ref属性也可以实现聚焦效果: 原理其实很简单,Element 已经提供了 focus 方法,但是文档并没有写明如何去调用,下面是在el-input标签上加入ref属性,然后在需要
vue3输入框生成的时候如何自动获取焦点详解

目录前言创建实例演示(创建文件,可忽略) 解决方法 1.方法一 2.方法二总结前言当我们在做vue3的项目的时候,在对一些信息的修改的时候,需要双击或者点击按钮来进行操作,让数据变成输入框来进行修改数据,当输入框失去焦点的时候就进行保存,然而不方便的是,输入框出现的时候不能获取焦点导致用户的体验不好. 创建实例演示(创建文件,可忽略) 首先我们需要一个vue3的项目,如何创建一个vue3的项目,新建一个空的文件夹,cmd打开,输入 1. vue create 项目的名称举例:vue c
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)

效果图代码部分复制代码代码如下: // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(document).click(function(event){ if($(
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

本文实例讲述了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能.分享给大家供大家参考,具体如下: 最近都成为页面仔了,主要工作都放在了前段,以前总是写后台程序,对前端的一些技术 html,css,javascript ,虽然都懂一些,但要做出比较好看页面,还是有很大的差距的.最近就遇到了这样一个要求不是很高,但有点小清新风格的登录或注册页面,要求如下: 1. 在输入框中如果没有内容,则显示提示:比如"请输入用户名" 2. 如果输入框获得焦点,则隐藏提示 3.
微信小程序 input输入框控件详解及实例（多种示例）

微信小程序 input输入框控件今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下:  <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图输入框默认状态: 输入框获取焦点状态: 大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码代码如下: &l
解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

目录问题描述: 问题分析: 解决思路: 重点在这里!!!我踩坑被折磨很久的一个地方!!!一定要用 px!!! 总结: 问题描述: 最近的做了个客服聊天的功能,遇到一个问题如下:在手机上点击聊天页底部的input框后,键盘弹起同时页面会整体上移,标题栏被顶上去了.如下图: 问题分析: input 获取焦点时会自动调起手机键盘,设置 :adjust-position="true",会导致键盘弹起时页面整体上移解决思路: 设置使键盘弹起使页面不上移设置输入框所在盒子为绝对定位键盘弹起
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法

根据网上查找到的 typeahead使用方法,到最后一步时就出错,数据能从数据库读取出来,但在输入框显示提示时,全都显为:underfined.捉摸了半天都发现不了问题出在哪儿.后来在http://blog.64cm.com/post/2014/08/13/%E4%BD%BF%E7%94%A8bootstrap-typeahead%E6%8F%92%E4%BB%B6 上不经意发现这么一句话:"在当前版本的typeahead中,已经不再支持在source属性中直接调用ajax方法获取数据源了.&q
利用js 进行输入框自动匹配字符的小例子

html 复制代码代码如下: 输入框自动匹配字符~但是遇到一个问题~所有匹配的字符要事先写好~大概如果是大型网站的话~应该是利用数据库的记录吧<span style

element input输入框自动获取焦点的实现

相关推荐

随机推荐