作成したボタンの値をテキストボックスへ出力方法

作成したボタン（HTML）押下後、テキストボックスへ出力するにはどのようにすればよいでしょうか？
このテキストボックスは
・暗証番号機能（数値のみ）
・4桁の入力制限

以上です。
よろしく願いいたします。

行動規範の内容に同意します

回答5件

https://teratail.com/questions/12654 への回答で示したサンプル
http://jsdo.it/katoy/okz4 ではだめでしたか？

サンプルでは数値のボタンをクリックするとテキストエリアに数値が追加されていくようになっています。
これを参考にして、クリックしたときにお望みの動作をさせるように変更をすることが可能なはずです。

投稿2015/07/18 22:40

編集2015/07/18 22:42

katoy

総合スコア22324

ITnewperson

2015/07/19 09:05

回答ありがとうございます。コードを参考にしてうまく動作がしなかったので試行錯誤をしていましたが考えに詰ってしまい投稿しました。前回の質問で確認をすれば良かったですが、自分なりに考えてみたかったので返答が遅くなりました。

katoy

2015/07/19 09:30

２つ質問があります。 1. サンプルのページは rik さんのブラウザ環境で動作しましたか？ (もしエラーがでているならエラーメッセージも教えてください) 2. どんなコードを書いた結果、動作しなかったのですか？ (エラーがでているならエラーメッセージも教えてください)

ITnewperson

2015/07/19 10:05

【回答】 ⒈ rik さんのブラウザ環境で動作しましたが、コードの簡単にまとめていたunishakooooさんのコードを利用しました。（回答して頂いたコード全てでエラーは発生しませんでした。）

ITnewperson

2015/07/19 10:09

⒉JSのコードです。　申し訳ありませんが、HTML部分はbackupをとっていませんでした。 <script type="text/javascript"> $(document).ready(function(){ // 数字ボタンをクリックしたら、暗証番号に追加する $(".num-button").click(function () { var num = $(this).attr('value'); var pass = $('#pass').val(); if (pass.length < 4) { $('#pass').val(pass + num); } }); // 暗証番号を空文字にする。 $("#clear").click(function () { $('#pass').val(""); }); }); </script> ＃pass テキストボックスのid

行動規範の内容に同意します

試しに作ってみました

html
1<head>
2    <meta charset="UTF-8">
3</head>
4<body>
5    <button class="btn" value="0">0</button>
6    <button class="btn" value="1">1</button>
7    <button class="btn" value="2">2</button>
8    <button class="btn" value="3">3</button>
9    <button class="btn" value="4">4</button>
10    <button class="btn" value="5">5</button>
11    <button class="btn" value="6">6</button>
12    <button class="btn" value="7">7</button>
13    <button class="btn" value="8">8</button>
14    <button class="btn" value="9">9</button>
15    <input id="tbox" type="text" maxlength="4">
16
17    <script>
18        (function() {
19            var tbox = document.getElementById('tbox');
20
21            Array.prototype.forEach.call(document.getElementsByClassName('btn'), function(btn) {
22                btn.onclick = function(e) {
23                    // テキストボックスのvalueとボタンのvalueを連結して先頭４文字を取り出す
24                    tbox.value = (tbox.value+e.target.value).substr(0,4)
25                }
26            });
27
28            // テキストボックスに数値以外の入力があった場合に削除する
29            tbox.oninput = function(e) {
30                e.target.value = e.target.value.replace(/[^\d]/g, '');
31            }
32        })()
33    </script>
34</body>

投稿2015/07/18 14:16

takamujp

総合スコア66

ITnewperson

2015/07/19 09:07

回答ありがとうございます。数値以外の入力は考えていなかったので参考になりました。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

こんばんわ。
jQueryを使っていますが、簡単サンプルを作ってみました。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5</head>
6<body>
7  <div>
8    <input type="button" value="1" id="1">
9    <input type="button" value="2" id="2">
10    <input type="button" value="3" id="3">
11    <input type="button" value="4" id="4">
12    <input type="button" value="5" id="5">
13    <input type="button" value="6" id="6">
14    <input type="button" value="7" id="7">
15    <input type="button" value="8" id="8">
16    <input type="button" value="9" id="9">
17  </div>
18  <div>
19    <input type="text" id="pass" readonly>
20  </div>
21  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
22  <script>
23    $(function(){
24      $('input[type=button]').click(function(){
25        if ($('#pass').val().length < 4) {
26          $('#pass').val($('#pass').val() + $(this).val());
27        }
28      });
29    });
30  </script>
31</body>
32</html>

投稿2015/07/18 14:08

編集2015/07/18 14:28

退会済みユーザー

総合スコア0

ITnewperson

2015/07/19 09:47

回答ありがとうございます。返信遅くなり申し訳ありません。無事入力ができました。ありがとうございます。 jQueryを使いこなせていないのでまだまだ勉強足りないです。そして、jQueryの便利さにも気づきました。

行動規範の内容に同意します

おおむねこんな感じでしょうか？

html
1<!doctype html>
2<html>
3<head>
4 <meta charset="utf-8">
5</head>
6<body>
7<div><input type="text" id="text" maxlength="4" pattern="^[0-9]+$"></div>
8<div>
9	<button type="button" id="number0">0</button>
10	<button type="button" id="number1">1</button>
11	<button type="button" id="number2">2</button>
12	<button type="button" id="number3">3</button>
13	<button type="button" id="number4">4</button>
14	<button type="button" id="number5">5</button>
15	<button type="button" id="number6">6</button>
16	<button type="button" id="number7">7</button>
17	<button type="button" id="number8">8</button>
18	<button type="button" id="number9">9</button>
19</div>
20<script>
21(function(window,document){
22	init();
23	function init() {
24		for (var i = 0; i <=9; i++) {
25			(function(i){
26				document.getElementById('number' + i).addEventListener('click',function(){numClick(i);},false);
27			})(i);
28		}
29	}
30	function numClick(num) {
31		var val = document.getElementById('text').value;
32		if (val.length >= 4) {
33			return;
34		}
35		val = '' + val + num;
36		document.getElementById('text').value = val;
37	}
38})(window,document);
39</script>
40</body>
41</html>

投稿2015/07/18 14:07

rik

総合スコア1151

ITnewperson

2015/07/19 11:52

回答ありがとうございます。関数の理解が不十分ですので勉強します。

行動規範の内容に同意します

質問の意味が良く理解できていないのですが、下記のような事でしょうか?

html
1<input type="text" id="text" maxlength="4" pattern="^[0-9]+$">
2<button type="button" onclick="document.getElementById('text').value='1234';">ボタン</button>