ハニカムウエアのブログ

ハニカムウエアのブログ

システム開発、セキュリティ対策についての記事を書いています。

Google Chromeで入力項目にmaxlengthをかけると「このテキストを半角~にしてください」とポップアップが表示される件

タイトルの通りです。

htmlで<input type="text" id="hoge" maxlength="10"/>みたいな入力項目を作ります。

その入力項目に全角で適当に文字をmaxlengthで指定した文字数より多く入力。

enterを押さずそのままカーソルを入力した文字の上に持っていくと下記画像のように出ます。

そしてこいつが出た後はなぜかmaxlength以上の文字が入力できます汗

f:id:honeycomware_inc:20170412215128j:plain

エンジニアによるエンジニアのためのサイト始まる!!【teratail】

弊社の技術者がこの事象をとりあえず解消したので以下手順を参考にしてみてください。

jqueryプラグイン

Maxlength Pluginプラグインして下記コードを追加します。

<script type="text/javascript" src="../jquery.maxlength.js"></script>

function()内にidと紐付けて以下のコードを追加

$(function() {

$('#hoge').maxlength();

});

hogeはmaxlengthを指定したテキストのid名です。

上記のコードを実装するとmaxlengthで指定した文字数以上の文字が入力できなくなり今回の問題を解決できました。

 自社で開発を行っております。弊社ホームページもぜひご覧ください。

f:id:honeycomware_inc:20170106130819j:plain