整数だったら2桁まで、少数点が入ったら5桁までの入力フォーム

Question

パーセンテージを小数第二位まで入力できるフォームを作成しています。
###やりたいこと
パーセントを入力するフォームで、整数のパーセントの時は"10"まで、少数点を利用する際は
"10.25"といった形で入力をできるようにしたいです。
少数点がフォームに入力された時点で、maxlengthが"5"に書き換わるような実装を考えています。

桁数にこだわる理由ですが、該当ボタン押下で発火するjavascriptの計算を行う箇所で"100"以上の値を該当箇所を入力した際に、エラーになってしまうからです。

###やってみた

　　$("#RATE").change(function(){
　　　　var element = document.getElementById("RATE");
　　　　　　if(element.value.match(/./)){
　　　　　　　　element.maxLength = 5
　　　　　　}
　　});

　　<td><input type="text" name="RATE" id="RATE" maxlength="2"  value="" /></td>

上記のプログラムで動作が可能かと思い、設定しましたが該当のフォームからフォーカスが外れた際に動き始め、一度、少数点を入力しフォーカスアウトした後、maxlengthが"5"に書き換わっているようです。

なにかスマートな方法があれば、ご教示いただければと思います。よろしくお願い致します。

Answer 1

桁数にこだわる理由ですが、該当ボタン押下で発火するjavascriptの計算を行う箇所で"100"以上の値を該当箇所を入力した際に、エラーになってしまうからです。

ボタン押下時にvalueを確認し、100以上でない場合のみ計算を実行するような作りに変えてしまった方がよいのではないでしょうか…？

Comments

[takany]

解決方法の視点を変えるようなご回答は本当に為になります。
自分なりにどの方法がベストか考え、実装を進めたいと思います、有難うございます。

Answer 2

maxlength制御よりも、数値範囲で制御する実装が賢い気がします。

<input type="number" name="rate1" min="0" max="100">

小数点第三位以降を禁止するなら、正規表現で。

<input type="text" name="rate2" pattern="100(.0{1,2})?|\d{1,2}(.\d{1,2})?">

後は文法の問題で「どこまでルーズな記述を許すか」ですが、これも正規表現で調整可能です。

• .1 を 0.1 として扱う
• 1. を 1 として扱う

Re: takany さん

Comments

[takany]

ご回答いただき有難うございます。数字の制御で実装をしてみましたがいい感じです。
しかしpatternでの制御ですが、他フォームの入力チェックのデザインの兼ね合いで今回は適応できません…
しかしこれまた視点を変えるご回答で、勉強になります。ありがとうございます。

[think49]

> しかしpatternでの制御ですが、他フォームの入力チェックのデザインの兼ね合いで今回は適応できません…
pattern属性を使うのは、あくまで「正規表現」が主ですので、JavaScriptコード側で正規表現を使っても実装可能です。
「整数=2桁、小数=5桁」は完璧に実装したとしても、「0以上100未満の整数」「0以上、999.9未満の小数」になりますが、それが期待通りの動作とは考えづらかった為、正規表現をお勧めしました。
UIの問題だけなら、RegExp#testで「0以上100以下の整数、小数」をテストすれば十分と考えます。
(親記事の正規表現を「0以上100以下の整数、小数」を指定できるものに修正しました)

[takany]

内容を確認いたしました。回答内容の修正もしていただきありがとうございます。
誰かが同じ悩みを持った時に、すごく参考になるページになったように感じ、うれしいです。

Answer 3

UI/UX側の意見を言うと、
あまりWebサイトを公開する側が、訪問者に対して「俺様のサイトの挙動に従え！」という姿勢はあまり良くありません。
<input type="number" max="10.99" min="0" step="0.05">のタグをぽんと設置するか、
右や下に「0〜10.95の数値を入力してください。」みたいな注意書きを併記しておくような作りの方が好ましいでしょう。

そういった意味ではthink49さんの意見とほぼ同様です。

---

この辺の話はさておき、シンプルに問題に向き合いましょうか。

少数点がフォームに入力された時点で、maxlengthが"5"に書き換わるような実装

これは発想・着眼点は面白いのですが、
10と入力した後のドットがそのままでは捨てられてしまいます。
この捨てられるはずのドットはonkeydownやonkeyupで拾えるんですかね？捨てられるんですかね？(未確認

まぁ捨てられてしまうならmaxlength拡張後に.を補えば良いですが、
その後ドットが削られたらmaxlengthは当然"2"に戻るんですよね？
ドットが2個に増えた後に1個に減ったら？こんな感じでコードばかり複雑で長くなる筋悪な方針に思えます。

だったら最初からmaxlength="5"で待ち受け、
oninputあたりで毎回の入力を見張って11以上の数値になった場合、
ドットが含まれていなければ10、含まれているならば10.99を
input要素へ代入させてしまう作りにしたほうが非常に楽に実装出来るでしょう。

でもこの対応ってまんま<input type="number" max="10.99" min="0" step="0.05">なんですよね。
input要素のデザインが変わったりするんでしょうか？
よくわからん…やっぱり無駄に思えるんですが色々考えてみてください。

Comments

[takany]

ご回答いただきありがとうございます。
質問ですべての背景を記述しているわけではないので、少々本題からそれてしまいましたが
このmaxlengthを書き換える実装に執着する必要はないということはわかりました。
仰る通り、すべてのパタンに対応するようにこの実装を進めたら、鼬ごっこになる気がしてきました。
多様な回答をいただいて、考え方が広がってよかったです。

Answer 4

<input type="text" name="RATE" pattern="[1-9]?[0-9](.[0-9]{1,2})*"  value="" />

Comments

[yambejp]

ちなみに最初にmaxlengthが2でしたら10と入力した時点で「.」が入力できないので
処理に矛盾があります。
また「10.」のように中途半端なものが許されちゃうし、今回の場合maxlengthはあまり
有効に活用はできないと思います

[takany]

表記に矛盾がありまして、失礼しました。VB６のシステムを踏襲し作成しているので、そっちに引っ張られ過ぎました。正規表現苦手なので、勉強したいと思います。有難うございます。

Answer 5

ご質問を見る限りだと、フォームのメイン機能（サブミットやサブミット後の計算処理）に関しては別の方が実装していて、そこは関知していないように見受けられましたので、目的のRATE inputのみに絞って回答いたします。

jQueryで実装されているようなのでjQueryで書きますね。これをページにそのまま実装すればおそらく動くはずです。

const $rate = $('#RATE')

let invalid = false
let validInput

$rate.on('keyup', () => {
  const input = $rate.val().trim()

  if(input === '' || input.match(/^\-?([1-9]\d?|0)(.\d{1,2})?$/)) {
    invalid = false
    validInput = input // 正常入力を保存
  } else {
    invalid = true
  }
})
.on('change', () => {
  if(invalid) $rate.val(validInput) // 直前の正常入力に補正
})

動作サンプル： https://codepen.io/kotat/pen/qLjqoK

上記サンプルでは、maxlengthの挙動により近づけることと、フォームのメイン機能とできる限り切り離すために、おかしな値を入力した場合にユーザーに何も通知せずに値を補正しています。

この挙動はユーザビリティ上よろしくないと思いますので、本来であればchangeイベント内の処理は実装せず、異常入力が発生したタイミング（上記JSのif文内にあるinvalid = trueあたり）でユーザーに入力値が正しくない旨をメッセージングして、修正を促す実装が良いかと思います。

Comments

[takany]

ご回答いただきありがとうございます。少し間が空いてしまったので、私自身内容を忘れてしました。
質問した当初に採用した実装の部分と見比べながら、参考にさせていただきたいと思います。

Answer 6

keyup使うのであればこれでできます。
2桁に戻す処理が必要か分からなったので5にするやつだけ。

$('#RATE').keyup(function(e) {
  if (e.keyCode == 190){
    var element = document.getElementById("RATE");
    element.maxLength = 5
  }
});

Comments

[mepon]

他の方のコメントにもありますが、確認したところ
10入力→『.』を押しても『.』が入力されない（ここで処理が動く）
もう一度『.』を押して初めて画面上が10.になる。
やはりvalueの中身を見て処理してあげる方がよいかもしれませんね。

[takany]

ご回答いただきありがとうございます。確かに初期値がmaxlength="2"だと矛盾でした。
もしmepon様の処理を実装し、maxlengthを5→2に戻す場合は
フォーム内に"."がなければ。のようなif文をもう一つ追加すればよろしいのでしょうか。

[mepon]

既に5桁入力されているものにたいしてmaxlength=2を付与しても後ろ3桁が動的に消えるわけではないので少し考慮する必要があります。2桁入力後にドットを入力しても捨てられる問題もありますし。。
私ならば、
①パーセンテージのフォームを2つに分ける
（よく登録フォームにある@前後で入力部分が2つに分かれてるメールアドレスのようなイメージ）
②100以上でエラーになってしまう計算処理の方を修正する
このどちらかを選ぶかなあと思います。

Answer 7

入力された時点で発火したいという事に関してお答えすると、keyupを使えばいいかと思います。

$("セレクタ").keyup(() => {

})

Comments

[takany]

ご回答有難うございます。keyupイベントを知らなかったので勉強になりました。
ひとつ引き出しが増えました！