質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

8752閲覧

javascriptの入力制限に作り方

jal0994

総合スコア20

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/12/26 16:54

input type="number"を使い、数値のみで3桁までの許容は入力可にして、4桁は入力させないようにしたいのですが、maxlengthが効かないのでjavascriptで制御できるようにプログラミングを下記のように作りしました、3桁になったらバックスペースや左右に移動する以外押せないようにしたのですが、画像のように数値をドラッグして数値を入力する場合は入力可にしたいのですが、何かいい方法はあるでしょうか?ご教授いただければ幸いです。
よろしくお願いします。
イメージ説明
例)999→999を画像のようにドラッグ→1を押下したら999が消えて1になる。

$("input[type='number']").on('keydown', function(e) { var k = e.keyCode; if(!((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || k == 8 || k == 46 || k == 39 || k == 37)) { return false; }else{ if($(this).val().length>=3){ if(!(k == 8 || k == 46 || k == 39 || k == 37)){ return false; } } });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

この場合、keydownイベントよりもkeyupイベントを使うほうが良いと思います。
jQueryを使うのであれば入力制限はこのようにできると思います。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<form> 9 <input type="number" max="999" id="text1"> 10</form> 11<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 12<script> 13 $('#text1').on('keyup', function () { 14 if ($(this).val().length >= 4) { 15 $(this).val($(this).val().slice(0, 3)); 16 } 17 }); 18</script> 19</body> 20</html>

追記

mukkunさんにコメントしていただいたinputを使う方法を追記します。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6</head> 7<body> 8<form> 9 <input type="number" max="999" id="text1"> 10</form> 11<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 12<script> 13 $('#text1').on('input', function () { 14 if ($(this).val().length >= 4) { 15 $(this).val($(this).val().slice(0, 3)); 16 } 17 }); 18</script> 19</body> 20</html>

投稿2016/12/26 20:56

編集2016/12/27 13:37
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mukkun

2016/12/27 03:49

UI的にはkeyupではなくinputを使うと尚よいですね。
jal0994

2016/12/27 04:15

おー!なるほど!こんなやり方があったんですね!すごい助かります!ありがとうございます!
jal0994

2017/01/01 13:58

s8_chuさん、連絡遅れて大変申し訳ありません。inputを使う方法も記載していただき本当にありがとうございました!
guest

0

こんな感じでいいと思います。

javascript

1var min = 0; 2var max = 999; 3 4$("input[type='number']").on('keydown keyup', function(){ 5 var $input = $(this), 6 val = $input.val(); 7 8 if(val.length > 3){ 9 $input.val(max); 10 } 11});

投稿2016/12/27 01:49

yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jal0994

2016/12/27 04:20

なるほど!こんなやり方もあるんですね!これも参考にさせていただきます!本当にありがとうございます!
guest

0

単純に、max=999と設定する方法ではなにかまずいのでしょうか。

投稿2016/12/26 23:00

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamato_hikawa

2016/12/27 01:51

数字キーで数値を入力すると3桁超えてしまうのが問題ですね。 上下キーやマウスでの増減だけならそれで問題ないのですが。
jal0994

2016/12/27 04:19

yamato_hikawaさんのおっしゃる通り、確かにmaxを999にすれば、スピンボタンで入力した場合999より大きい数値にはならないのですが、直接入力してしまうと、999より大きい数値が入力できてしまうので、それを問題視しておりました。 説明不足で大変申し訳ありませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問