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

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

ただいまの
回答率

90.51%

  • JavaScript

    16421questions

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

  • HTML

    8970questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

javascript 関数などを使って纏めて処理を行いたい場合

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 271

pelican

score 5

テキストにユーザーの入力欄(整数の入力)が10項目あるとします。
下記のコードのようにHTMLからid取得を行い、取得した要素を配列に纏め、
その配列からfor文を利用し、10個の入力値に対し正規表現で整数(0以下の整数は除く)のみ入力できるよう設定したいのですが、配列やfor文の処理条件を模索しましたが初心者のため現段階では思いつきませんでした。ご教授いただけないでしょうか。

実際に次のようなパターンになります。

コード
<input type ="text" value ="0~9の整数" id ="nyuryoku1">
<input type ="text" value ="0~9の整数" id ="nyuryoku2">
<input type ="text" value ="0~9の整数" id ="nyuryoku3">
<input type ="text" value ="0~9の整数" id ="nyuryoku4">
<input type ="text" value ="0~9の整数" id ="nyuryoku5">
<input type ="text" value ="0~9の整数" id ="nyuryoku6">
<input type ="text" value ="0~9の整数" id ="nyuryoku7">
<input type ="text" value ="0~9の整数" id ="nyuryoku8">
<input type ="text" value ="0~9の整数" id ="nyuryoku9">
<input type ="text" value ="0~9の整数" id ="nyuryoku10">
<input type ="button" value="入力結果" id ="draw" onclick ="check1()">
コード
//ユーザーが入力結果をクリックしたら
function check1() {
var nyuryoku1 = document.getElementById('nyuryoku1');
var nyuryoku2 = document.getElementById('nyuryoku2');
var nyuryoku3 = document.getElementById('nyuryoku3');
var nyuryoku4 = document.getElementById('nyuryoku4');
var nyuryoku5 = document.getElementById('nyuryoku5');
var nyuryoku6 = document.getElementById('nyuryoku6');
var nyuryoku7 = document.getElementById('nyuryoku7');
var nyuryoku8 = document.getElementById('nyuryoku8');
var nyuryoku9 = document.getElementById('nyuryoku9');
var nyuryoku10 = document.getElementById('nyuryoku10');

var 変数名 = [配列]
for文() {処理条件}
}


の表記のような感じでクリックされたら処理をする。の表記で纏めたいです。
今回は10個で例をあげさせていただきましたが、入力値が100個になっても、
100個同じコードを書くのではなく、何かの引き出し、ボックスなどに一纏めにしてから、
処理を行っていけたらなと思い投稿させていただきました。

for文の処理条件には別条件分岐を使い、ユーザーの入力値に何も入力されていなかった場合、
なども後から追加したいです。
配列を使ってfor文を使う以外にも方法がありましたらご教授のほどお願い致します。

追記>
正規表現の部分ですが、整数(0以下を除く)を入力した場合はtrue、
それ以外の負の整数や文字列が手入力により入力された場合は、alertを使って「入力された数値は使用できません」などのようにしたいです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/05/08 08:00

    要件次第では既に回答があるようにtype=numberだけでよくなります。

    キャンセル

  • pelican

    2018/05/08 08:07

    質問内容を修正致しました。不備が多く申し訳ありません。

    キャンセル

  • think49

    2018/05/08 09:01

    「整数(0以下の整数は除く)」は0を含みませんが、「value ="0~9の整数"」は0を含み、矛盾があります。

    キャンセル

回答 3

+7

 pattern属性

pattern属性で正規表現を指定することが可能です。
https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation
https://www.html5rocks.com/ja/tutorials/forms/html5forms/

<input pattern="^\d+$" />
<input pattern="^\d$" />

(2018/05/08 12:32追記)
^$は不要との指摘を頂きました。

<input pattern="\d+" />
<input pattern="\d" />

 <input type="number">

<input type="number"> には「小数」と「負の数」にマッチする性質があり、これだけでは「正の整数」を実現できません。

(2018/05/08 12:32追記)
step,min,max属性ではキーボード入力に対応できません。

Re: pelican さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/08 09:12

    <input type=number>でもstep(デフォルトで1)やmin、maxなどで値の制限はできますが、「キーボードからの入力自体は弾ききれない」ようですね…

    キャンセル

  • 2018/05/08 10:04

    pattern属性値は全体にマッチする必要があるので、通常^および$は不要です。

    キャンセル

  • 2018/05/08 12:35

    To: maisumakun さん、x_x さん
    フォローありがとうございます。
    親記事に追記しました。

    キャンセル

  • 2018/05/08 23:24

    返信が遅くなり申し訳ございません。
    回答ありがとうございます、HTML側からのチェックも可能なのですね。
    勉強になります!今後使う機会があれば使用してみたいと思います。

    キャンセル

+6

JavaScriptを持ち出すまでもなく、HTML5の機能で入力できるものを制限するほうが楽かと思います。

<input type='number' min='0' max='9' required (後略)>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/08 09:19

    なお、JavaScriptでフォームの「.checkValidity」メソッドを実行することで、送信しないタイミングで入力の整合性をチェックできます(requiredやtype=numberでの範囲外の数値チェックも、そのタイミングで合わせて行われます)。

    キャンセル

  • 2018/05/08 23:26

    返信が遅くなり申し訳ありません。
    回答ありがとうございました。このパターンだと記述も纏まり楽ですね。
    今後の参考にさせていただきます!

    キャンセル

checkベストアンサー

+3

alertまでがワンパックならjavascriptで

<script>
document.addEventListener('input',function(e){
  var t=e.target;
  if(t.nodeName=="INPUT" && t.id.match(/^nyuryoku\d+$/)){
    var reg=new RegExp("[^\\d]","g");
    var v=t.value;
    if(v.match(reg)){
      t.value=v.replace(reg,"");
      alert("入力された数値は使用できません");
    }
  }
});
</script>

<input type ="text" value ="" id ="nyuryoku1">
<input type ="text" value ="" id ="nyuryoku2">
<input type ="text" value ="" id ="nyuryoku3">
<input type ="text" value ="" id ="nyuryoku10">
<input type ="text" value ="" id ="nyuryoku100">

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/08 23:28

    返信が遅くなり申し訳ありません。
    回答ありがとうございました。やりたいことが明確になっていて、例としてとても参考になりましたので
    ベストアンサーにさせていただきました!今後の参考とさせていただきます!

    キャンセル

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16421questions

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

  • HTML

    8970questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。