요소의 autofocus 실효 문제를 신속하게 해결하다

원인:
autofocus는 vue에서 input의 원생 속성이고,element도 이런 방법을 지원합니다.
그러나element 중의el-input 구성 요소 밖에 다른 구성 요소가 있어서 autofocus가 효력을 상실하여 수동으로focus 방법을 호출하여 모을 수 밖에 없습니다.
방법:
귀속ref

this.$refs.myNameId.focus();
동적 귀속ref


<el-input :ref=" 'input'+ form.id " v-model="form.name" />

this.$nextTick(()=>{
 let id = 'input'+this.form.id;
 this.$refs[id].focus();
})

보충 지식:element input 입력 상자 자동 초점 얻기
최근 프로젝트에서 폼을 만들 때 자동으로 댓글 상자로 스크롤하고 댓글 상자가 자동으로 초점을 맞추도록 해야 합니다. 입력 상자의focus 상태를 수동으로 터치해야 합니다.
그러나,element는 autofocus 속성을 지원하지 않습니다. 그러면 원생 js 효과로 초점 효과만 얻을 수 있습니다.
document.getElementById("input").focus();
또는 vue의 ref 속성을 이용하여 포커스 효과를 실현할 수 있습니다.
원리는 사실 매우 간단하다. Element는 이미 focus 방법을 제공했지만 문서는 어떻게 호출하는지 명확하게 쓰지 않았다. 다음은 el-input 라벨에 ref 속성을 넣고 필요한 곳에서 직접 호출하면 된다.


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()
 })
 }
})

이상에서 요소의 autofocus 실효 문제를 신속하게 해결하는 것은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

vue.js의 컴포넌트 컬렉션 "Element"를 사용하여 다중 선택을 구현합니다.

멀티플 셀렉트란 간단하게 말하면 복수 선택 가능한 셀렉트 박스입니다. 의외로 고객이 요구하는 UI상 필요한 것이 많아, 지금까지도 몇번이나 요망에 응해 왔습니다. 대체로 jQuery의 멀티플 셀렉트를 사용하고 있었습...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

요소의 autofocus 실효 문제를 신속하게 해결하다

좋은 웹페이지 즐겨찾기