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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

18711閲覧

フォーム入力欄に半角数字以外を入力できないようにしたい

wtn

総合スコア12

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/07/03 03:59

前提・実現したいこと

分単位で入力したら、◯◯時間◯◯分に変換したテキストを入力欄の側にテキストとして表示させる入力フォームを作成しています。入力欄には半角数字以外入力できないようにしたい。

発生している問題・エラーメッセージ

JSでイベント(keydown keyup blur)が発火した時に、全角数字を半角に変換していますが、safariで、全角文字入力→enterを押した時に同じ文字が入力されるなど、挙動がおかしくなる。

該当のソースコード

SAMPLE.ConvertInputTime.prototype = { IS_ERROR: 'err', init: function() { this.$parents = this.$trigger.closest('td'); this.$output = this.$parents.find('.jscConvertTimeOutput'); this.bindEvent(); }, bindEvent: function() { var self = this; this.$trigger.on('keyup keydown blur', function() { self.convert($(this)); }); }, convert: function($trigger) { var maxlength = this.$trigger.attr('maxlength'); var inputValue = $trigger.val(); inputValue = inputValue.replace(/[A-Za-z0-9]/g, function($trigger){ return String.fromCharCode($trigger.charCodeAt(0) - 65248) }).slice(0, maxlength); this.$trigger.val(inputValue); var alertText = this.getAlertText(inputValue); this.changeBgColor(inputValue); this.$output.text(alertText); }, getAlertText: function(inputValue) { var time = Math.floor(inputValue / 60); var minutes = inputValue % 60; if(inputValue <= 0 || inputValue % 5 !== 0 || inputValue === '') { return '5分単位で入力してください'; }else if(time === 0 && minutes < 60) { return minutes + '分'; }else if(minutes === 0) { return time + '時間'; }else { return time + '時間' + minutes + '分'; } }, changeBgColor: function(inputValue){ if(inputValue % 5 !== 0) { this.$parents.addClass(this.IS_ERROR); return; } this.$parents.removeClass(this.IS_ERROR); }, };

試したこと

イベントをkeydown keyupではなくinputにするとchromeで同じように挙動がおかしくなった。
また<input type="number" />はsafariで<input type="text" />と同じ挙動になってしまったので使用できない。

入力制限を最新のPCブラウザ(IE11、edge、firefox、chrome、safari)に対応させることは可能でしょうか?

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

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

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

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

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

guest

回答3

0

ベストアンサー

inputにするとchromeで同じように挙動がおかしくなった

ちょっと状況がわかりませんが、モダンブラウザなら入力必須や制限が指定できます

HTML

1<form> 2<input type="text" name="x" required pattern="^[0-9]+$"> 3<input type="submit" value="go"> 4</form>

投稿2017/07/03 04:12

yambejp

総合スコア114581

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

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

yambejp

2017/07/03 04:14

ただしsubmit時の制限になるので、入力時のチェックをしたいなら やはりinputイベントでチェックするのが妥当です
wtn

2017/07/03 12:21

返答ありがとうございます。 やはりjavascriptで入力時にチェックするのではなく、submitの時にやるのが 良さそうですね。 不具合についてですが、inputに変更したところ、safariで全角数字入力時に 不具合が起きました。 ・不具合確認用 (safariで不具合) https://jsfiddle.net/n_wtn/o90nyubo/10/
guest

0

input[type=range]

UIが変わりますが、input[type=range] なら5刻みで入力を強制出来ます。キーボード入力は必須でしょうか。

HTML

1<input id="minutes" type="range" min="0" max="1000" step="5"> 2<div id="output"></div> 3 4<script> 5jQuery('#minutes').on('change', function (event) { 6 var minutes = event.target.valueAsNumber; 7 8 jQuery('#output').text(minutes < 60 ? minutes + '分' : Math.floor(minutes / 60) + '時間' + minutes % 60 + '分'); 9}); 10</script>

input[type=number]

(2017/07/04 13:16追記)
このコードは全角数字を入力できないブラウザ(Google Chrome)がある為、使用できませんでした。
後述の input[type=text] のコードを使用して下さい。

HTML

1<input id="minutes" type="number" min="0" max="1000" step="5"> 2<div id="output"></div> 3 4<script> 5'use strict'; 6jQuery('#minutes').on('input change', function (event) { 7 var input = event.target, message; 8 9 if (input.checkValidity()) { 10 var minutes = input.value.length ? input.valueAsNumber : 0; 11 message = minutes < 60 ? minutes + '分' : Math.floor(minutes / 60) + '時間' + minutes % 60 + '分'; 12 } else { 13 message = input.validationMessage; 14 } 15 16 jQuery('#output').text(message); 17}); 18</script>

input[type=text]

HTML

1<style> 2input:invalid { 3 border: solid 3px #f88; 4} 5</style> 6</head> 7<body> 8 9<input id="minutes" type="text" pattern="0*[0-9]{0,2}[05]$" maxlength="3" value="0" data-custom-error-message="0-995 の間の5の倍数を指定して下さい"> 10<div id="output"></div> 11 12<script> 13'use strict'; 14(function () { 15 function toASCIINumber (numberString) { 16 return numberString.replace(/[0-9]/g, function (numberChar) { 17 var multiByte = '0123456789', singleByte = '0123456789'; 18 19 return singleByte[multiByte.indexOf(numberChar)]; 20 }); 21 } 22 23 function handleInput (event) { 24 var input = event.target, minutes = toASCIINumber(input.value), message; 25 26 if (input.value !== minutes) { 27 input.value = minutes; 28 } 29 30 minutes = Number(minutes); 31 input.setCustomValidity(''); // Reset input.validity.customError to false. 32 33 if (input.checkValidity()) { 34 message = minutes < 60 ? minutes + '分' : Math.floor(minutes / 60) + '時間' + minutes % 60 + '分'; 35 } else { 36 message = input.validationMessage; 37 } 38 39 jQuery('#output').text(message); 40 } 41 42 function handleInvalid (event) { 43 var input = event.target; 44 45 input.setCustomValidity(input.getAttribute('data-custom-error-message')); 46 } 47 48 jQuery('#minutes').on('input', handleInput).on('invalid', handleInvalid).trigger('input'); 49}()); 50</script>

Safari で <input type="number" /> を使用できない

また<input type="number" />はsafariで<input type="text" />と同じ挙動になってしまったので使用できない。

念のため、確認しますが、iOS Safari ではなく、Mac Safari でしょうか。
Google Chrome 59.0.3071.115 で input[type=number] において、全角数字の入力を受け付けない現象は確認できました。
Can I use によれば、iOS Safari 9.3-11 はインクリメント/デクリメントボタンが存在せず、min, max, step 属性を実装していません。

更新履歴

  • 2017/07/04 01:47 input[type=number] のコード追記
  • 2017/07/04 13:16 input[type=text] のコード追記

Re: wtn さん

投稿2017/07/03 14:00

編集2017/07/04 04:17
think49

総合スコア18156

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

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

wtn

2017/07/13 11:45 編集

返信が遅れ申し訳ありません。 返答ありがとうございます。 >ーボード入力は必須でしょうか。 キーボード入力は必須です。 >iOS Safari ではなく、Mac Safari でしょうか。 safari はMac Safariです。なのでブラウザはIE11、edge、firefox、chrome、MAC safariの最新版に対応していることが条件になります。
guest

0

keydown keyupなど入力発生時に都度チェックして変換していると入力操作自体に支障をきたしかねません。
「半角数値のみ入力可」とヘルプ文言を添えておき、入力内容送信時のバリデーションチェックに集約しておいた方が良いと思いますよ。

投稿2017/07/03 04:09

編集2017/07/03 04:09
m.ts10806

総合スコア80765

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

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

m.ts10806

2017/07/03 04:11 編集

ああ、、入力都度変換してリアルタイムに横に出してるんですね。 質問内容にそぐわない回答をしてしまいました。すみません。
wtn

2017/07/03 12:30 編集

返答ありがとうございます。 たしかに現状でモダンブラウザに対応するには、ヘルプで文言をいれ、 入力内容送信時のバリデーションチェックが一番現実的かなと思います。 ただ可能なら知識として知っておきたいですね (゚ー゚;A
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問