버튼 클릭 시 키보드 고정 (Ionic Angular)

채팅 앱 같은 것을 개발한다 치면, '전송' 버튼을 누를 때마다 화면의 키보드가 내려갔다가 올라오는 현상이 발생한다.

이는 채팅 내용이 적혀있는 textarea의 focus가 전송 버튼을 누를 때마다 해제되기 때문이다. 그러니 전송할 때마다 자동으로 textarea에 focus가 가도록 함수를 짜 놓더라도 순간순간 키보드가 내려갔다 올라오는 현상을 방지하지는 못한다. 사용자들의 입장에선 촐싹대는 키보드에 머리가 아플거다.

 

근데 카카오톡 등 채팅 앱을 보면 내가 전송 버튼을 눌러도 키보드는 움직이지 않는다. 되게 당연한 기능인데 어떻게 구현하는 걸까?

 

카카오톡 채팅화면 키보드

https://stackoverflow.com/questions/45858201/keep-keyboard-open-on-ionic-when-button-click-chat-app

 

keep keyboard open on Ionic when button click ( chat app )

 

내가 Ionic Angular를 활용해 개발하므로(근데 아마 다른 프레임워크에서도 비슷하지 않을까?) 나의 경우에 한해 설명하자면

 

<button (click)="doSomething()"> 버튼 </button>

 

위처럼 (click)에 함수가 바인딩되어 있는 것을

 

<button (mousedown)="$event.preventDefault(); doSomething()"> 버튼 </button>

 

위처럼 click 이벤트를 mousedown 이벤트로 바꾸고, $event.preventDefault() 함수를 추가해주면 된다.

click 이벤트에다가 $event.preventDefault() 를 바인딩하니 안되더라. 세부적인 명세가 다르긴 다른듯.

 

간단한 꿀팁. 인데 위 stackoverflow 보면 환경마다 결과가 다른 것 같다. 일단 나는 안드로이드와 ios 에서 다 잘 작동했다.