사용자가 Mobile Web에서 정보를 입력할 때 상황에 맞는 자판을 자판을 노출하도록 설정하는 방법을 공유하고자 합니다. (한글 우선순위, Mobile Application 제외)
ime-mode 속성은 IME(Input Method Editor)의 상태를 반환하거나 설정합니다.
ime-mode 문제점
1) 해당 속성은 웹표준이 아니므로 모든 버전의 브라우저에 지원되지 않습니다.
2) ime-mode 속성이 한글모드 이지만 사용자가 이전에 영문모드로 사용한 경우 영문모드 자판이 노출됩니다.
3) 사용자가 커스텀 자판을 다운로드해서 사용하는 경우 문제가 발생할 수 있습니다.
4) 모든 경우를 제어할 수 없으므로 한/영 자판 제어가 불가능하다고 할 수 있습니다.
ime-mode 속성
1) <input type="text" style="ime-mode:active"> : 한글모드 (전환가능)
2) <input type="text" style="ime-mode:inactive"> : 영문모드 (전환가능)
3) <input type="text" style="ime-mode:auto"> : 한/영 전환가능
4) input type="text" style="ime-mode:disabled"> : 영문모드 (전환불가)
5) <input type="text" style="ime-mode:desativated"> : 한글모드 (전환가능)
테스트 코드
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
input[type=text] {
-webkit-ime-mode:active;
-moz-ime-mode:active;
-ms-ime-mode:active;
ime-mode:active;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>INPUT TYPE</h2>
<form action="">
<div class="mb-3">
<label for="txt">Text</label>
<input type="text" class="form-control" id="txt" placeholder="Enter text" name="txt" style="ime-mode:active;"><!-- default 로 한글모드 -->
</div>
<div class="mb-3">
<label for="url">Url</label>
<input type="url" class="form-control" id="url" placeholder="Enter url" name="url" style="ime-mode:inactive;"><!-- default 로 영문모드 -->
</div>
<div class="mb-3">
<label for="srch">Search</label>
<input type="search" class="form-control" id="srch" placeholder="Enter search" name="srch">
</div>
<div class="mb-3 mt-3">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="mb-3">
<label for="nbr">Number</label>
<input type="number" class="form-control" id="nbr" placeholder="Enter number" name="nbr">
</div>
<div class="mb-3">
<label for="tel">Tel</label>
<input type="tel" class="form-control" id="tel" placeholder="Enter tel number" name="tel">
</div>
</form>
</div>
</body>
</html>
테스트 화면
테스트 기기 : Galaxy S10+
728x90