鍍金池/ 問(wèn)答/HTML/ 怎么在vue中實(shí)現(xiàn)自動(dòng)聚焦和跳轉(zhuǎn)?

怎么在vue中實(shí)現(xiàn)自動(dòng)聚焦和跳轉(zhuǎn)?

如圖,在Vue中v-for生成input,當(dāng)點(diǎn)擊新增按鈕時(shí),光標(biāo)自動(dòng)聚焦到最新的input,窗口自動(dòng)移動(dòng)到合適的位置!
圖片描述

回答
編輯回答
落殤

vue.js的官方中文教程的[自定義指令](https://cn.vuejs.org/v2/guide/custom-directive.html)部分恰巧就和你的情形很相似,當(dāng)然本質(zhì)上就是直接調(diào)用focus獲取焦點(diǎn)。至于滾動(dòng)窗口,用window.scrollTo就好啦(????-)?

具體scroll到哪,計(jì)算思路是獲取以下兩個(gè)關(guān)鍵的值:

  1. 屏幕大??;
  2. 你要顯示的元素的位置

如果你只想要保證縱向的位置合適,那只用獲取縱向上的值就行了。其中第二條好像比較難獲取,給你查了一下,自己參看吧!

  1. https://www.cnblogs.com/wujin...
  2. https://www.cnblogs.com/wujin...

不過(guò)我剛剛突然想到,你可以給你要活動(dòng)到中央的元素加個(gè)name然后window.location.href += '#name'類(lèi)似這樣的即可。關(guān)鍵詞:錨點(diǎn)。如果滾動(dòng)的位置仍然不太合適——一般是會(huì)偏上——這時(shí)候你可以同時(shí)獲取當(dāng)前窗口滾動(dòng)高度,并使用window.scrollTo把滾動(dòng)位置向下再滾動(dòng)一點(diǎn)(例如滾動(dòng)半個(gè)屏幕的高度)。

2017年12月12日 08:44
編輯回答
赱丅呿

取得最后一個(gè)的dom元素,調(diào)用聚焦函數(shù)

2017年2月3日 22:58