vue实现输入框自动跳转功能_vue.js

来源:脚本之家  责任编辑:小易  

1、静态数据的自动提示,示例代码,仅供参考jQuery(document).ready(function(){var data=[{uid:'语文',pwd:'yuwen'},{uid:'英语',pwd:'yingyu'},{uid:'数学',pwd:'shuxue'}];jQuery("#city").autocomplete(data,{minChars:0,max:10,width:200,matchContains:true,formatItem:function(row,i,max){/格式化列表中的条目return row.uid+"_"+row.pwd;},formatMatch:function(row,i,max){/匹配的值return row.uid+""+row.pwd;},formatResult:function(row){/选择后文本框显示的值return row.uid+"dd;}}).result(function(event,row,formatted){alert(formatted);选择后触发的事件});});function_click(){alert(jQuery("#city").val());}input type="button"value="click"onclick="_click();2、动态数据的范例代码jQuery(document).ready(function(){jQuery("#city").autocomplete("autoData",{/使用远程地址获取数据minChars:0,max:10,width:200,matchContains:true,extraParams:{/city是url的传递参数city:function(){return jQuery("#city").val();}},formatItem:function(row,i,max){/格式化列表中的条目row=eval("("+row+")");return row.uid+"_"+row.pwd;},formatMatch:function(row,i,max){/匹配的值row=eval("("+row+")");return row.uid+""+row.pwd;},formatResult:function(row){/选择后文本框显示的值row=eval("("+row+")");return row.uid;}}).result(function(event,row,formatted){row=eval("("+row+")");alert(row.uid);});});function_click(){alert(jQuery("#city").val());}www.zgxue.com防采集请勿采集本网。

本文实例为大家分享了vue实现输入框自动跳转的具体代码,供大家参考,具体内容如下

Android 提供了 autocompletetextview 控件,如果不能满足需要可以使用EditText和popupWindows配合

<template> <div class="inputClass"> <div v-for="(item,index) in list" :key="index"> <input v-model="item.value" type="password" class="inputBorder" @keyup="jumpNext($event,index,item.value)" @keydown="replaceValue(index)"> </div> </div></template>

打开流览器 工具 internet选项 内容 自动完成 然后在WEB地址前打勾如果有使用邮箱 家用电脑 觉得安全的话 可以表单 表单上的用户名和密码前打勾 确认 保存 退出 重启流览器即可

JS:

把这句:onkeydown=\"javascript:onkeydownEnter()\"改成: onkeydown=\"if(event.keyCode=13)event.keyCode=9

jumpNext(event, index, val) { if (!/[0-9]/.test(val)) { this.list[index].value = ""; this.$message({ type: 'warning', message: '该密码仅为数字' }) return } let flag = document.getElementsByClassName("inputBorder"), currInput = flag[index], nextInput = flag[index + 1], lastInput = flag[index - 1]; if (event.keyCode != 8) { if (index < (this.list.length - 1)) { nextInput.focus(); } else { currInput.blur(); } } else { if (index != 0) { lastInput.focus(); } } if (index == 0) { this.num1 = event.key + '' } else if (index == 1) { this.num2 = event.key + '' } else if (index == 2) { this.num3 = event.key + '' } else if (index == 3) { this.num4 = event.key + '' } else if (index == 4) { this.num5 = event.key + '' } else if (index == 5) { this.num6 = event.key + '' } let str = this.num1 + this.num2 + this.num3 + this.num4 + this.num5 + this.num6 if (str.length == 6) { let params = str setUpSVIP(params).then(res => { // this.superVipVisible = false }).catch(err => { // this.superVipVisible = false this.$message({ type: 'error', message: '设置超级VIP失败' }) }) } }, /*当键盘按下的时候清空原有的数*/ replaceValue(index) { this.list[index].value = ""; }

表单内项太多的话建议不要在提交之前交给session之类的,然后传来传去,在取出来存进去的. 一般可以把表单分页,也就是把N个option分别放在几个页面,然后像我们安装软件一样下一步下一步,这样中间你

CSS:

把这句:onkeydown=\"javascript:onkeydownEnter()\"改成: onkeydown=\"if(event.keyCode=13)event.keyCode=9

.inputBorder { background: #ffffff; width: 50px; font-size: 50px; height: 50px; margin-left: 0px; margin-right: 0px; text-align: center; border: 1px solid #706969; }.inputClass { margin-top: 31px; display: flex; justify-content: center;}

前端路由是直接找到与地址匹配的一个e5a48de588b6e799bee5baa631333365646239组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式:1.在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航2.使用H5的window.history功能,使用URL的Hash来模拟一个完整的URL。当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。目录结构先来看看整体的目录结构和流程相关的主要需要关注点的就是 components、history 目录以及 create-matcher.js、create-route-map.js、index.js、install.js。下面就从 basic 应用入口开始来分析 vue-router 的整个流程。import Vue from 'vue'import VueRouter from 'vue-router'1.插件安装<router-view>and组件且给当前应用下所有的组件都注入$router and$route 对象Vue.use(VueRouter)2.定义各个路由下使用的组件,简称路由组件const Home={ template:'<div>home</div>' }const Foo={ template:'<div>foo</div>' }const Bar={ template:'<div>bar</div>' }3.创建 VueRouter 实例 routerconst router=new VueRouter({mode:'history',base:_dirname,routes:{ path:'/',component:Home },{ path:'/foo',component:Foo },{ path:'/bar',component:Bar }})4.创建 启动应用一定要确认注入了 router在中将会渲染路由组件new Vue({router,template:`Basicrouter-link to="/">/</router-link></li>router-link to="/foo">/foo</router-link></li>router-link to="/bar">/bar</router-link></li>barrouter-view>`}).$mount('#app')123456789101112131415161718192021222324252627282930313233343536373839404142作为插件上边代码中关键的第 1 步,利用 Vue.js 提供的插件机制.use(plugin)来安装 VueRouter,而这个插件机制则会调用该 plugin 对象的 install 方法(当然如果该 plugin 没有该方法的话会把 plugin 自身作为函数来调用);下边来看下 vue-router 这个插件具体的实现部分。VueRouter 对象是在 src/index.js 中暴露出来的,这个对象有一个静态的 install 方法:flow*/导入 install 模块import { install } from './install'/.import { inBrowser,supportsHistory } from './util/dom'/.export default class VueRouter {}赋值 installVueRouter.install=install自动使用插件if(inBrowser&window.Vue){window.Vue.use(VueRouter)}123456789101112131415161718可以看到这是一个 Vue.js 插件的经典写法,给插件对象增加 install 方法用来安装插件具体逻辑,同时在最后判断下如果是在浏览器环境且存在 window.Vue 的话就会自动使用插件。install 在这里是一个单独的模块,继续来看同级下的 src/install.js 的主要逻辑:router-view router-link 组件import View from './components/view'import Link from './components/link'/export 一个 Vue 引用export let_Vue/安装函数export function install(Vue){if(install.installed)returninstall.installed=true赋值私有 Vue 引用Vue=Vue/注入$router$routeObject.defineProperty(Vue.prototype,'$router',{get(){ return this.$root._router }})Object.defineProperty(Vue.prototype,'$route',{get(){ return this.$root._route }})/beforeCreate mixinVue.mixin({beforeCreate(){/判断是否有 routerif(this.$options.router){/赋值_routerthis._router=this.$options.router/初始化 initthis._router.init(this)/定义响应式的_route 对象Vue.util.defineReactive(this,'_route',this._router.history.current)}}})/注册组件Vue.component('router-view',View)Vue.component('router-link',Link)/.}12345678910111213141516171819202122232425262728293031323334353637383940414243这里就会有一些疑问了?为啥要 export 一个 Vue 引用?插件在打包的时候是肯定不希望把 vue 作为一个依赖包打进去的,但是呢又希望使用 Vue 对象本身的一些方法,此时就可以采用上边类似的做法,在 install 的时候把这个变量赋值 Vue,这样就可以在其他地方使用 Vue 的一些方法而不必引入 vue 依赖包(前提是保证 install 后才会使用)。通过给 Vue.prototype 定义$router、$route 属性就可以把他们注入到所有组件中吗?在 Vue.js 中所有的组件都是被扩展的 Vue 实例,也就意味着所有的组件都可以访问到这个实例原型上定义的属性。beforeCreate mixin 这个在后边创建 Vue 实例的时候再细说。实例化 VueRouter在入口文件中,首先要实例化一个 VueRouter,然后将其传入 Vue 实例的 options 中。现在继续来看在 src/index.js 中暴露出来的 VueRouter 类:import { createMatcher } from './create-matcher'/.export default class VueRouter {constructor(options:RouterOptions={}){this.app=nullthis.options=optionsthis.beforeHooks=[]this.afterHooks=[]创建 match 匹配函数this.match=createMatcher(options.routes|[])根据 mode 实例化具体的 Historylet mode=options.mode|'hash'this.fallback=mode='history'&!supportsHistory if(this.fallback){mode='hash'} if!inBrowser){mode='abstract'}this.mode=mode switch(mode){case 'history':this.history=newHTML5History(this,options.base)breakcase 'hash':this.history=new HashHistory(this,options.base,this.fallback)breakcase 'abstract':this.history=new AbstractHistory(this)breakdefault:assert(false,`invalid mode:${mode}`)}}}123456789101112131415161718192021222324252627282930313233343536373839里边包含了重要的一步:创建 match 匹配函数。match 匹配函数匹配函数是由 src/create-matcher.js 中的 createMatcher 创建的:flow*/import Regexp from 'path-to-regexp'/.import { createRouteMap } from './create-route-map'/.export function createMatcher(routes:Array):Matcher {创建路由 mapconst { pathMap,nameMap }=createRouteMap(routes)匹配函数 function matchraw:RawLocation,currentRoute?Route,redirectedFrom?LocationRoute {} function redirectrecord:RouteRecord,location:LocationRoute {} function aliasrecord:RouteRecord,location:Location,matchAs:stringRoute {} function_createRouterecord:?RouteRecord,location:Location,redirectedFrom?LocationRoute { if(record&record.redirect){ return redirect(record,redirectedFrom|location)} if(record&record.matchAs){ return alias(record,location,record.matchAs)} return createRoute(record,location,redirectedFrom)}return match}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051具体逻辑后续再具体分析,现在只需要理解为根据传入的 routes 配置生成对应的路由 map,然后直接返回了 match 匹配函数。继续来看 src/create-route-map.js 中的 createRouteMap 函数:flow*/import { assert,warn } from './util/warn'import { cleanPath } from './util/path'/创建路由 mapexport function createRouteMap(routes:Array):{pathMap:Dictionary,nameMap:Dictionary} {/path 路由 mapconst pathMap:Dictionary<RouteRecord>=Object.create(null)/name 路由 mapconst nameMap:Dictionary<RouteRecord>=Object.create(null)/遍历路由配置对象 增加 路由记录routes.forEach(route=>{addRouteRecord(pathMap,nameMap,route)})return {pathMap,nameMap}}/增加 路由记录 函数function addRouteRecordpathMap:Dictionary,nameMap:Dictionary,route:RouteConfig,parent?RouteRecord,matchAs?string{获取 path、nameconst { path,name }=routeassert(path!null,`"path"is required in a route configuration.`)/路由记录 对象const record:RouteRecord={path:normalizePath(path,parent),components:route.components|{ default:route.component },instances:{},name,parent,matchAs,redirect:route.redirect,beforeEnter:route.beforeEnter,meta:route.meta|{}}/嵌套子路由 则递归增加 记录if(route.children){/.route.children.forEach(child=>{addRouteRecord(pathMap,nameMap,child,record)})}/处理别名 alias 逻辑 增加对应的 记录if(route.alias!undefined){ if(Array.isArray(route.alias)){route.alias.forEach(alias=>{addRouteRecord(pathMap,nameMap,{ path:alias },parent,record.path)})} else {addRouteRecord(pathMap,nameMap,{ path:route.alias },parent,record.path)}}/更新 path mappathMap[record.path]=record/更新 name mapif(name){ if!nameMap[name]){nameMap[name]=record} else {warn(false,`Duplicate named routes definition:{ name:"${name}",path:"${record.path}"}`)}}}function normalizePath(path:string,parent?RouteRecord):string {path=path.replace(/\\/$/,'')if(path[0]='/')return path if(parent=null)return path return cleanPath(`${parent.path}/${path}`)}1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283可以看出主要做的事情就是根据用户路由配置对象生成普通的根据 path 来对应的路由记录以及根据 name 来对应的路由记录的 map,..内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue实现在v-html的html字符串中绑定事件
  • vue.js实现只能输入数字的输入框
  • vue项目中常见问题及解决方案(推荐)
  • vue踩坑记录之数组定义和赋值问题
  • 基于vue-cli npm run build之后vendor.js文件过大的解决方法
  • vue项目分环境打包的实现步骤
  • 谈谈vue中mixin的一点理解
  • vue的全局提示框组件实例代码
  • vue-cli脚手架build目录下utils.js工具配置文件详解
  • 详解vue2父组件传递props异步数据到子组件的问题
  • vue实现路由跳转的原理是什么,是调用js底层什么方法
  • 怎样用Ajax实现网站输入框的自动提示功能
  • excel表格中,如何在输入数值后,光标自动跳转到下一个文本框中。
  • mcgs脚本程序请教一个问题:按下按钮,另一个输入框的数字能自动累加,该怎样做。能否编个例子。谢谢
  • android如何实现 输入框自动提示功能
  • 怎样使输入框里的内容有记忆功能?
  • 谁能帮我解决实现按enter键实现光标自动跳转到下个文本框的功能啊?代码如下,怎么定义个js来实现?
  • 网页中输入框的记忆功能怎么实现?
  • 为什么输入法在转换界面时候自动跳转?
  • 如何清除浏览器输入框中关于以前输入内容的记录?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue实现在v-html的html字符串中绑定事件vue.js实现只能输入数字的输入框vue项目中常见问题及解决方案(推荐)vue踩坑记录之数组定义和赋值问题基于vue-cli npm run build之后vendor.js文件过大的解决方法vue项目分环境打包的实现步骤谈谈vue中mixin的一点理解vue的全局提示框组件实例代码vue-cli脚手架build目录下utils.js工具配置文件详解详解vue2父组件传递props异步数据到子组件的问题vue引用js文件的多种方式(推荐)简单理解vue中props属性vue之父子组件间通信实例讲解(prvue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue.js中的图片引用路径的方式如何在 vue.js 中使用第三方js库vue.js开发环境安装教程vue 插值 v-once,v-text, v-html详解详解vue中多个有顺序要求的异步操作处理vue.js 实现评价五角星组件的实例代码vue-dplayer 视频播放器实例代码vue做网页开场视频的实例代码vue组件通信的四种方式汇总vue项目中实现的微信分享功能示例vue与node.js通过socket.io通信的示例代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved