どうもっす。
WEBおじさんです。
ご無沙汰しまくってます。
ネタ切れ、という噂もありますがｗ
さて、今回はフォームの「テキスト」を数値のみの入力にする、ということについてお話していきましょう。
これについて、いろいろ検索して試してみた結果、一番いいと思った方法を今回はご紹介します。
その前に、一番簡単であると思った方法として
「type=”number”」
を使おうと思いました。
実際にタグを追加してテストアップしてみました。
するとどうでしょう。
なんか、入力フォームの右側に上下の矢印が出てきました。
もちろん、数値の入力は可能で、矢印をクリックするとご丁寧に1ずつ上がっていきました。
まぁ、要件は満たしているので悪くはないのですが、でもなんか不細工でねー。
自分としては不合格、ということでnumberを使うのはやめました。
ということで今回のデモはこちら。
各ソースは以下です。
今回はhtmlとjsのみでOKですね。
【HTML】
<form id=”srcForm”><input type=”text” id=”mpId” value=””>
</form>
【jQuery】
$(document).ready(function(){
$(‘#mpId’).keyup(function(){
var thisval = $(this).val().replace(/[^\d-.]/g,”);
$(this).val(thisval);
});
});
こんな感じですね。
数値のみの入力ということで、小数点は入力可能にしました。
今回のキモになっているのは「keyup」ですね。
最初は「change」を使ってみたのですが、この場合は入力フォームからフォーカスが外れた時に実行されるみたいで、その場合、動きとしては問題ないんですけど、入力したその時に動かないとあまり意味がいないと思い、keyupを使いました。
keydownだとうまく判定されず、希望の動きにならなかったので却下。
で、keyupを使った結果、デモを見ていただけるとわかるのですが、数字とドット以外を入力した場合、入力した文字が一瞬出てその後消えます。
そうです。
今回の動きは「数値以外を入力できなくする」のではなく、「入力した値から数値以外を削除する」ということなのです。
その方が動きとしてわかりやすいかなー、と思いまして。
欲を言えば、数値のテキストフォームがフォーカスされたら入力モードを半角英数にできればもっと使い勝手がよくなるかな。
まぁ、それはおまけということで。
あ、あとハイフンも入力できるようですね。
だから電話番号とかもこれでいけますね。
ということで、皆さんのお役に立てたらうれしいです。
以上、WEBおじさんでした！
また！