Q&A
ありがとうございます。keyup がわからなかったので調べてきました。
http://qiita.com/maruyam-a/items/cf0168f91d934b449a07
勉強になりました。
やりたい事は、数値を入力するフォームに数値を入れるとリアルタイムでその値を取得し入力した回数、繰り返し処理を行いたいです。
調べると、http://www.kaasan.info/archives/1676というサイトが出てきました。
下の方の「リアルタイムにテキストエリアのvalue値を取得する」というものが一番近いような気がします。
読んで見たんですが、そもそもJavaScriptの知識があまりなくわかりませんでした。
実際に自分で作ったフォームのコードが以下です。
php
1<form id="anime"> 2 <div class="form-group row"> 3 <label for="inputPassword" class="col-sm-2 col-form-label">話数</label> 4 <div class="col-sm-10"> 5 <div class="input-group mb-2 mb-sm-0" id="wasuu"> 6 <div class="input-group-addon">全</div> 7 <input type="number" class="form-control" name="wa" placeholder="話数"> 8 <div class="input-group-addon">話</div> 9 </div> 10 <div> 11 <label class="custom-control custom-checkbox"> 12 <input type="checkbox" class="custom-control-input" name="zero"> 13 <span class="custom-control-indicator"></span> 14 <span class="custom-control-description">０話スタート</span> 15 </label> 16 </div> 17 </div> 18 </div> 19</form>
入力は7行目のinput です。
とりあえずは、取得を行いたいので、ここに入力された値をコンソール画面に表示をやりたいです。
どのように書けばいいのか教えてください。
回答5件
0
IE8以下を無視するならinputイベントも使えます。
【input - Web 技術のリファレンス | MDN】
https://developer.mozilla.org/ja/docs/Web/Reference/Events/input
【Can I use... Support tables for HTML5, CSS3, etc】
http://caniuse.com/#feat=input-event
投稿2017/09/12 16:39
総合スコア69407
0
keyup イベントを拾って、処理するのが定番ですね。
投稿2017/09/12 16:24
退会済みユーザー
総合スコア0
0
ベストアンサー
わたしも基本的にはinputイベント派ですが、inputは確定前のデータまで拾ってしまいます
keyupの方がいい場合もあるので運用にあわせて使い分けて下さい
※以下IMEをありなしで動きがちがいます
javascript
1$(function(){ 2 $('input').on('keyup input change',function(e){ 3 console.log(e.type+":"+$(this).val()); 4 }); 5});
html
1<input type="text">
投稿2017/09/13 00:30
総合スコア114833
ありがとうございます。
http://qiita.com/maruyam-a/items/cf0168f91d934b449a07#change-keypress-keyup%E3%81%AE%E6%8C%99%E5%8B%95%E3%81%BE%E3%81%A8%E3%82%81
を見てたんですが、inputイベントというのが見当たりません。
でも、これらとよく似たものなんですかね？
0
jqueryを使って下記のようなコードでいかがでしょうか。
1話 or 0話 - end話までのul > (li * end)要素を追加するコードに変更しました。また、チェックボックスでli要素を自動更新するようにしています。
js
1$(function() { 2 var $episodeGroup = $('#anime .input-group-addon').eq(1); //〇話DIV要素 3 var $inputEepisode = $('#anime input[name="wa"]'); //話数のTEXT 4 var $zeroStart = $('#anime input[name="zero"]'); //ゼロスタートのCHECKBOX 5 6 var createEpisodeElem = function (start, end) { 7 var episodes = ''; 8 9 if (start === undefined) start = 1; 10 if (end === undefined) return ''; 11 12 if ($('#anime input[name="zero"]').is(':checked')) { 13 start = 0; 14 end--; 15 } 16 17 for (var i = start; i <= end; i++) { 18 episodes += '<li data-episode="'+ i +'">'+ i +'話</li>'; 19 } 20 21 return episodes; 22 }; 23 24 var updateEpisodeElem = function (start, end) { 25 if (start === undefined) start = 1; 26 if (end === undefined) return false; else end = parseInt(end); 27 28 if (end > 0) { 29 $episodeGroup.empty().append('<ul>'+ createEpisodeElem(start, end) +'</ul>'); 30 return true; 31 } 32 33 return false; 34 }; 35 36 //話数記入でli要素を追加 37 $inputEepisode.on('input paste', function (e) { 38 updateEpisodeElem(1, $(e.target).val()); 39 }); 40 //ゼロ話スタートチェックでli要素を更新 41 $zeroStart.on('change', function () { 42 updateEpisodeElem(1, $('#anime input[name="wa"]').val()); 43 }); 44});
HTMLの属性にmin・maxを設定すれば、最小値・最大値を決められますので、下記のように「min="1"」を追加しておきます。
html
1<input type="number" class="form-control" name="wa" min="1" placeholder="話数">
投稿2017/09/12 17:22
編集2017/09/14 05:55
総合スコア1652
テレビやアニメ、連番のついた作品の1話1話の内容を入力したく、たとえば全１３話の作品だった場合、フォームに１３と入力すると、その下に入力フォームを１３個作成したいと思います。（これを言おうとするとややこしかったので繰り返し処理と略しました）０話スタートのチェックは１３としたら１～１３のフォームを作りたいんですが、中には０話から始まる作品もありますよね？その場合に０～１２としたいためこのようなチェックをつけました。この説明でわかりますかね？
それとなんですが、数字の前の全や最後の話は関係ないです。
入力画面でわかりやすくするデザインです。
なので、欲しいのは入力された数値だけです。
0
なんか突っ込みどころが多すぎる気がするのですが、(PHP？htmlじゃなくて？や、jquery？いらなくない？など)
とりあえず挙げていただいたURLのようにchangeイベントを使うなら、こんな感じですかね？当方も初心者なんで下手くそなコードかもしれませんが。
lang
1<!DOCTYPE html><html> 2<head> 3 <meta charset="UTF-8"> 4 <title>anime</title> 5<script> 6window.addEventListener("load",function(){ 7 wa = document.getElementsByName("wa")[0]; 8 wa.addEventListener("change",function(){ 9 console.log(wa.value); 10 alert(wa.value); 11 },false); 12},false); 13</script> 14</head> 15<body> 16 <form id="anime"> 17 <div class="form-group row"> 18 <label for="inputPassword" class="col-sm-2 col-form-label">話数</label> 19 <div class="col-sm-10"> 20 <div class="input-group mb-2 mb-sm-0" id="wasuu"> 21 <span class="input-group-addon">全</span> 22 <input type="number" class="form-control" name="wa" placeholder="話数" style="width:20px;"> 23 <span class="input-group-addon">話</span> 24 </div> 25 <div> 26 <label class="custom-control custom-checkbox"> 27 <button class="custom-control-input" name="zero"><span class="custom-control-description">０話スタート</span></button> 28 <span class="custom-control-indicator"></span> 29 </label> 30 </div> 31 </div> 32 </div> 33</form> 34</body> 35</html>
フォームの一部は勝手ながら自然な形に変えてみました。
開発者ツールを使っておられるかわからなかったのでalert入れましたけど、
うるさかったらコメントアウトしてください。m(_ _)m
##追記・修正ver
lang
1<!DOCTYPE html><html> 2<head> 3 <meta charset="UTF-8"> 4 <title>anime</title> 5<script> 6window.addEventListener("load",function(){ 7 wa = document.getElementsByName("wa")[0]; 8 wa.addEventListener("input",function(){ 9 console.log(wa.value); 10 },false); 11},false); 12</script> 13</head> 14<body> 15 <form id="anime"> 16 <div class="form-group row"> 17 <label for="inputPassword" class="col-sm-2 col-form-label">話数</label> 18 <div class="col-sm-10"> 19 <div class="input-group mb-2 mb-sm-0" id="wasuu"> 20 <span class="input-group-addon">全</span> 21 <input type="number" class="form-control" name="wa" placeholder="話数" style="width:20px;"> 22 <span class="input-group-addon">話</span> 23 </div> 24 <div> 25 <label class="custom-control custom-checkbox"> 26 <button class="custom-control-input" name="zero"><span class="custom-control-description">０話スタート</span></button> 27 <span class="custom-control-indicator"></span> 28 </label> 29 </div> 30 </div> 31 </div> 32</form> 33</body> 34</html>
投稿2017/09/12 16:45
編集2017/09/12 17:39
総合スコア2043
changeじゃないんですねよく読んでませんでしたすみません…ただchangeのところは他の回答者様がおっしゃるような別なイベントに変えていただければ、差し支えないと思います。
kei344様の受け売りですが、inputイベントを利用した場合の修正verを追記しました。
以前の回答そのものを編集しても良かったんですけどね…最初私は間違えましたのでその自戒も込めて追記とさせていただきました。
色々突っ込んでいただいてありがとうございます。
PHPを使っているんですが、フォームに入力した値分だけの入力欄を作りたいのですが、それをPHPでやろうとすると、一旦数値を送信してそれで次のページで反映する形になると思います。
これでもいいのですが、一つのページで入力させたかったので、リアルタイムで反映できる方法を取らせていただきました。
ソースもありがとうございます。
参考にさせていただきます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/13 12:30