cssで ime-mode: disabled; を指定すればInternet ExplorerやFirefoxは制御できますが、Chromeは言うことを聞いてくれません。
HTML5ではinput typeに電話番号入力欄を作成するtelが指定できます。
数字やハイフン程度しか入力できないイメージがありますが、英字も入力できてしまいます。
なのでこの機能を流用します。
通常はinput typeはtextでime-mode: disabled;としておく。
Chromeであればinput typeをtelに変更してしまう。
<style>
#username {
ime-mode: disabled;
}
</style>
<script>
$(function() {
var agent = window.navigator.userAgent.toLowerCase();
if (agent.indexOf('chrome') != -1) {
document.getElementById('username').type = 'tel';
}
});
</script>
<form method="post" action="/">
<input type="text" name="username" id="username">
<input type="submit" value="送信">
</form>