[팀] 겸상 - ref를 이용해 disabled된 textarea에 focus 주기

[그림 1] textarea의 disabled를 해제하고 focus 주기

 

Vue.js에서 [그림 1] 같이 disabled 된 textarea의 disabled를 해제하고 focus를 주고자 하였다. 처음에는 커스텀 디렉티브로 v-focus를 만들어 textarea에 바로 적용했었다. disabled를 해제하면 즉시 focus on 될 거라 생각했지만 작동하지 않았다. autofocus도 마찬가지였다. 결국 해결했는데 ref를 이용한 방법이다. disabled를 데이터 바인딩을 하지 않고 적용한 상태에서 textarea에 ref를 주고 해당 ref를 찾아 disabled를 해제한 후 focus를 순차적으로 주는 방식으로 구현했다. 앞에서 focus가 작동하지 않았던 이유는 disabled가 풀리지 않은 상태에서 focus가 적용되었기 때문으로 보인다. 작동하는 코드는 다음과 같다('...'은 이 기능과 상관없어 생략한 코드 부분임).

 

template 부분

<textarea
    ...
    disabled
    ref="modifyDescription"
    ...
></textarea>

 

script 부분

async doModify() {
    ...
    if (this.userInfo === true) {
        ...
    } else {
        ...
        this.$refs.modifyDescription.disabled = false;
        this.$refs.modifyDescription.focus();
    }
},

 

참고한 자료

https://blog.naver.com/PostView.nhn?blogId=phy920&logNo=221543688415&parentCategoryNo=&categoryNo=16&viewDate=&isShowPopularPosts=true&from=search 

[Vue.js] set focus to input tag