teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Dropboxのようなファイル名変更UIを実装したい

編集履歴

質問編集履歴

7

解を追記

2017/12/20 01:12

投稿

nexco
nexco

スコア12

title CHANGED
File without changes
body CHANGED
@@ -134,4 +134,72 @@
134
134
  </script>
135
135
  </body>
136
136
  </html>
137
+ ```
138
+
139
+ ##成果物
140
+ [karamarimo](https://teratail.com/users/karamarimo)様の回答がベースとなっています。
141
+ ```
142
+ <head>
143
+ <title></title>
144
+ </head>
145
+ <body>
146
+ <table id="outside">
147
+ <tr>
148
+ <td>
149
+ <form class="simple-form" id="t1">one</form>
150
+ </td>
151
+ </tr>
152
+ <tr>
153
+ <td id="t2">two</td>
154
+ </tr>
155
+ </table> <button onclick="replaceElement()">要素を置き換え</button>
156
+ <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
157
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
158
+ <script type="text/javascript">
159
+
160
+ function replaceElement() {
161
+ //テキストボックスに変更
162
+ var element = document.getElementById("t1");
163
+ var newElement = document.createElement("input");
164
+ newElement.setAttribute("type", "text");
165
+ newElement.setAttribute("id", "ipt");
166
+ newElement.setAttribute("value", document.getElementById("t1").innerHTML);
167
+ var target = element.childNodes.item(0);
168
+ element.replaceChild(newElement, target);
169
+ }
170
+ $(function () {
171
+ $('.simple-form').on('submit', function () {
172
+ //変更後の値を送信
173
+ var $input = $(this).children('input[type=text]');
174
+ var text = $input.val();
175
+ var formdata = new FormData();
176
+ formdata.append('newtext', text);
177
+ $.ajax({
178
+ url: 'action_rename.php',
179
+ type: 'POST',
180
+ data: formdata,
181
+ cache: false,
182
+ contentType: false,
183
+ processData: false,
184
+ dataType: 'text'
185
+ }).done(function (j_data, textStatus, jqXHR) {
186
+ alert('成功');
187
+ }).fail(function (jqXHR, textStatus, errorThrown) {
188
+ alert('失敗');
189
+ });
190
+ //テキストボックスを削除
191
+ var node = document.getElementById("ipt");
192
+ if (node.parentNode) {
193
+ node.parentNode.removeChild(node);
194
+ }
195
+ //表示を変更後の値に変更
196
+ var info = document.getElementById('t1');
197
+ var textNode = document.createTextNode(text);
198
+ info.appendChild(textNode);
199
+ return false
200
+ })
201
+ })
202
+ </script>
203
+ </body>
204
+ </html>
137
205
  ```

6

項目追加

2017/12/20 01:12

投稿

nexco
nexco

スコア12

title CHANGED
File without changes
body CHANGED
@@ -55,6 +55,7 @@
55
55
  </td>
56
56
  ```
57
57
 
58
+ ##追記
58
59
  3.エンターで変更を確定までのソースコード（仮）
59
60
  ```
60
61
  <!--

5

ソースコードのインデント調整

2017/12/19 03:29

投稿

nexco
nexco

スコア12

title CHANGED
File without changes
body CHANGED
@@ -61,86 +61,76 @@
61
61
  テーブルのt1部分を入力とするコード
62
62
  -->
63
63
  <head>
64
- <title></title>
64
+ <title></title>
65
65
  </head>
66
66
  <body>
67
- <table id="outside">
68
- <tr>
69
- <td id="t1">one</td>
70
- </tr>
71
- <tr>
72
- <td id="t2">two</td>
73
- </tr>
74
- </table>
75
- <pre id="rslt" class="">&nbsp;</pre>
76
- <button onclick="replaceElement()">要素を置き換え</button>
77
- <input type="button" id="btn" class="btn btn-default" value="確定" />
78
- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
79
- <script type="text/javascript">
80
- function replaceElement() {
81
- var element = document.getElementById("t1");
82
- var newElement = document.createElement("input");
83
- newElement.setAttribute("type", "text");
84
- newElement.setAttribute("id", "ipt");
85
- newElement.setAttribute("value", document.getElementById("t1").innerHTML);
86
- var target = element.childNodes.item(0);
87
- element.replaceChild(newElement, target);
88
-
89
- }
90
-
91
- (function () {
92
- var oncomplete = function (event) {
93
- $('#rslt').html($('#ipt').val() || '&nbsp;');
94
- };
95
-
96
- var document_onready = function (event) {
97
- $('#ipt').complete(oncomplete);
98
- $('#btn').on('click', oncomplete);
99
- };
100
-
101
- $(document).ready(document_onready);
102
- })();
103
-
104
- (function (window, document, $, undefined) {
105
- /**
106
- * テキスト入力が確定したとき指定されたイベントハンドラを呼び出します。
107
- * @param handler {function} イベントハンドラ。イベントハンドラは jQuery.Event を引数にとる。
108
- * @return {jQuery} jQueryオブジェクト
109
- */
110
- $.fn.complete = function (handler) {
111
- var ENTER_KEY = 13;
112
- var keypressed = false;
113
-
114
- /**
115
- * keypressイベント発生時に呼び出されます。
116
- * @param event {jQuery.Event} イベントオブジェクト
117
- */
118
- var onkeypress = function (event) {
119
- if (event.keyCode !== ENTER_KEY) {
120
- return;
121
- }
122
- keypressed = true;
123
- };
124
-
125
- /**
126
- * keyupイベント発生時に呼び出されます。
127
- * @param event {jQuery.Event} イベントオブジェクト
128
- */
129
- var onkeyup = function (event) {
130
- if (event.keyCode === ENTER_KEY && keypressed) {
131
- // 入力確定のイベントを発生させます。
132
- handler.call(this, event);
133
- }
134
- keypressed = false;
135
- };
136
-
137
- // 各要素に対してイベントを付与します。
138
- return this.each(function (index) {
139
- $(this).on('keypress', onkeypress).on('keyup', onkeyup);
140
- });
141
- };
142
- })(window, document, jQuery);
143
- </script>
67
+ <table id="outside">
68
+ <tr>
69
+ <td id="t1">one</td>
70
+ </tr>
71
+ <tr>
72
+ <td id="t2">two</td>
73
+ </tr>
74
+ </table>
75
+ <pre id="rslt" class="">&nbsp;</pre> <button onclick="replaceElement()">要素を置き換え</button> <input type="button" id="btn" class="btn btn-default" value="確定" />
76
+ <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
77
+ <script type="text/javascript">
78
+ function replaceElement() {
79
+ var element = document.getElementById("t1");
80
+ var newElement = document.createElement("input");
81
+ newElement.setAttribute("type", "text");
82
+ newElement.setAttribute("id", "ipt");
83
+ newElement.setAttribute("value", document.getElementById("t1").innerHTML);
84
+ var target = element.childNodes.item(0);
85
+ element.replaceChild(newElement, target);
86
+ }
87
+ (function () {
88
+ var oncomplete = function (event) {
89
+ $('#rslt').html($('#ipt').val() || '&nbsp;');
90
+ };
91
+ var document_onready = function (event) {
92
+ $('#ipt').complete(oncomplete);
93
+ $('#btn').on('click', oncomplete);
94
+ };
95
+ $(document).ready(document_onready);
96
+ })();
97
+ (function (window, document, $, undefined) {
98
+ /**
99
+ * テキスト入力が確定したとき指定されたイベントハンドラを呼び出します。
100
+ * @param handler {function} イベントハンドラ。イベントハンドラは jQuery.Event を引数にとる。
101
+ * @return {jQuery} jQueryオブジェクト
102
+ */
103
+ $.fn.complete = function (handler) {
104
+ var ENTER_KEY = 13;
105
+ var keypressed = false;
106
+ /**
107
+ * keypressイベント発生時に呼び出されます。
108
+ * @param event {jQuery.Event} イベントオブジェクト
109
+ */
110
+ var onkeypress = function (event) {
111
+ if (event.keyCode !== ENTER_KEY) {
112
+ return;
113
+ }
114
+ keypressed = true;
115
+ };
116
+ /**
117
+ * keyupイベント発生時に呼び出されます。
118
+ * @param event {jQuery.Event} イベントオブジェクト
119
+ */
120
+ var onkeyup = function (event) {
121
+ if (event.keyCode === ENTER_KEY && keypressed) {
122
+ // 入力確定のイベントを発生させます。
123
+ handler.call(this, event);
124
+ }
125
+ keypressed = false;
126
+ };
127
+ // 各要素に対してイベントを付与します。
128
+ return this.each(function (index) {
129
+ $(this).on('keypress', onkeypress).on('keyup', onkeyup);
130
+ });
131
+ };
132
+ })(window, document, jQuery);
133
+ </script>
144
134
  </body>
145
135
  </html>
146
136
  ```

4

3.までのソースを追記

2017/12/19 03:27

投稿

nexco
nexco

スコア12

title CHANGED
File without changes
body CHANGED
@@ -53,4 +53,94 @@
53
53
  </ul>
54
54
  </div>
55
55
  </td>
56
+ ```
57
+
58
+ 3.エンターで変更を確定までのソースコード（仮）
59
+ ```
60
+ <!--
61
+ テーブルのt1部分を入力とするコード
62
+ -->
63
+ <head>
64
+ <title></title>
65
+ </head>
66
+ <body>
67
+ <table id="outside">
68
+ <tr>
69
+ <td id="t1">one</td>
70
+ </tr>
71
+ <tr>
72
+ <td id="t2">two</td>
73
+ </tr>
74
+ </table>
75
+ <pre id="rslt" class="">&nbsp;</pre>
76
+ <button onclick="replaceElement()">要素を置き換え</button>
77
+ <input type="button" id="btn" class="btn btn-default" value="確定" />
78
+ <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
79
+ <script type="text/javascript">
80
+ function replaceElement() {
81
+ var element = document.getElementById("t1");
82
+ var newElement = document.createElement("input");
83
+ newElement.setAttribute("type", "text");
84
+ newElement.setAttribute("id", "ipt");
85
+ newElement.setAttribute("value", document.getElementById("t1").innerHTML);
86
+ var target = element.childNodes.item(0);
87
+ element.replaceChild(newElement, target);
88
+
89
+ }
90
+
91
+ (function () {
92
+ var oncomplete = function (event) {
93
+ $('#rslt').html($('#ipt').val() || '&nbsp;');
94
+ };
95
+
96
+ var document_onready = function (event) {
97
+ $('#ipt').complete(oncomplete);
98
+ $('#btn').on('click', oncomplete);
99
+ };
100
+
101
+ $(document).ready(document_onready);
102
+ })();
103
+
104
+ (function (window, document, $, undefined) {
105
+ /**
106
+ * テキスト入力が確定したとき指定されたイベントハンドラを呼び出します。
107
+ * @param handler {function} イベントハンドラ。イベントハンドラは jQuery.Event を引数にとる。
108
+ * @return {jQuery} jQueryオブジェクト
109
+ */
110
+ $.fn.complete = function (handler) {
111
+ var ENTER_KEY = 13;
112
+ var keypressed = false;
113
+
114
+ /**
115
+ * keypressイベント発生時に呼び出されます。
116
+ * @param event {jQuery.Event} イベントオブジェクト
117
+ */
118
+ var onkeypress = function (event) {
119
+ if (event.keyCode !== ENTER_KEY) {
120
+ return;
121
+ }
122
+ keypressed = true;
123
+ };
124
+
125
+ /**
126
+ * keyupイベント発生時に呼び出されます。
127
+ * @param event {jQuery.Event} イベントオブジェクト
128
+ */
129
+ var onkeyup = function (event) {
130
+ if (event.keyCode === ENTER_KEY && keypressed) {
131
+ // 入力確定のイベントを発生させます。
132
+ handler.call(this, event);
133
+ }
134
+ keypressed = false;
135
+ };
136
+
137
+ // 各要素に対してイベントを付与します。
138
+ return this.each(function (index) {
139
+ $(this).on('keypress', onkeypress).on('keyup', onkeyup);
140
+ });
141
+ };
142
+ })(window, document, jQuery);
143
+ </script>
144
+ </body>
145
+ </html>
56
146
  ```

3

画像の説明を追加

2017/12/19 03:21

投稿

nexco
nexco

スコア12

title CHANGED
File without changes
body CHANGED
@@ -10,6 +10,7 @@
10
10
  0. 変更内容をpostで送信
11
11
  0. 【作成済み】受け取った値からDB内のファイル名を変更
12
12
 
13
+ GIFファイル。クリックで再生します。
13
14
  ![イメージ説明](85785ad4e188f7d53d7d10728141e9e7.gif)
14
15
 
15
16
  3.の部分は次のプラグインを使うことでできそうなのですが、

2

全体を書き直しました

2017/12/18 05:27

投稿

nexco
nexco

スコア12

title CHANGED
File without changes
body CHANGED
@@ -1,25 +1,24 @@
1
1
  簡単なオンラインストレージを作成しています。
2
- そこで、ファイル名の変更を作りたいと思っているのですが
2
+ その中でファイル名の変更UI（？）を作りたいと思っているのですが、
3
- どのようにしたらいいかわかりません。
3
+ JavaScriptの知識がなく、どのようにすれば分かりません。
4
- 理想としては、Dropboxのような「名前を変更」を選択 ⇒ ファイル名部分が編集画面（？）になるようなものを作りたいと思っています。
4
+ （DBの変更など実際の処理は作成済みです。）
5
5
 
6
+ 完成形としては画像のような
7
+ 0. ”ファイル名変更”をクリック
6
- ![参考例](0642f9fe217d8923a0cc5c48452543dc.png)
8
+ 0. ファイル名部分（”新しいファイル”）がテキストボックスになり編集可能状態に
9
+ 0. エンターで変更を確定
10
+ 0. 変更内容をpostで送信
11
+ 0. 【作成済み】受け取った値からDB内のファイル名を変更
7
12
 
8
- JQueryでできそうですが、よくわかりません。
13
+ ![イメージ説明](85785ad4e188f7d53d7d10728141e9e7.gif)
9
- よろしくお願いいたします。
10
14
 
11
- ##追記
15
+ 3.の部分は次のプラグインを使うことでできそうなのですが、
12
- バックエンド（PHP & SQL）部分は作成済みなのですが、そこにPOSTをするまでのフロントエンドサイド（？）の作り方がよくわかりません。
16
+ https://garafu.blogspot.jp/2015/09/jquery-complete.html
17
+ 2.の部分が検討もつきません。
13
18
 
14
- 一応流れとしては次のような感じを予定しています。
19
+ ヒント等でも結構ですので、お力添えをいただけると幸いです。
20
+ よろしくお願いいたします。
15
21
 
16
- 0. 下記の”ファイル名変更”リンクをクリック
17
- 0. ファイル名部分（”新しいファイル”）がテキストボックスになり編集可能状態に
18
- 0. エンター or ボックス外クリックで変更を確定
19
- 0. 変更内容をpostで送信
20
- 0. 【作成済み】受け取った値からDB内のファイル名を変更
21
- ※postの値などは特に決めていません。
22
-
23
22
  ```
24
23
  <table class="table table-striped table-hover">
25
24
  <thead>
@@ -33,7 +32,6 @@
33
32
  </thead>
34
33
  <tbody>
35
34
  <tr>
36
- <tr>
37
35
  <th>新しいファイル</th>
38
36
  <th>2019-06-08</th>
39
37
  <td class="table_setting">

1

ソースを含めた詳細を追記

2017/12/18 05:24

投稿

nexco
nexco

スコア12

title CHANGED
File without changes
body CHANGED
@@ -6,4 +6,52 @@
6
6
  ![参考例](0642f9fe217d8923a0cc5c48452543dc.png)
7
7
 
8
8
  JQueryでできそうですが、よくわかりません。
9
- よろしくお願いいたします。
9
+ よろしくお願いいたします。
10
+
11
+ ##追記
12
+ バックエンド（PHP & SQL）部分は作成済みなのですが、そこにPOSTをするまでのフロントエンドサイド（？）の作り方がよくわかりません。
13
+
14
+ 一応流れとしては次のような感じを予定しています。
15
+
16
+ 0. 下記の”ファイル名変更”リンクをクリック
17
+ 0. ファイル名部分（”新しいファイル”）がテキストボックスになり編集可能状態に
18
+ 0. エンター or ボックス外クリックで変更を確定
19
+ 0. 変更内容をpostで送信
20
+ 0. 【作成済み】受け取った値からDB内のファイル名を変更
21
+ ※postの値などは特に決めていません。
22
+
23
+ ```
24
+ <table class="table table-striped table-hover">
25
+ <thead>
26
+ <tr>
27
+ <th class="col-md-8 col-xs-8">File Name</th>
28
+ <th class="col-md-4 col-xs-4">Date</th>
29
+ <th class="table_setting">
30
+ <i class="glyphicon glyphicon-cog"></i>
31
+ </th>
32
+ </tr>
33
+ </thead>
34
+ <tbody>
35
+ <tr>
36
+ <tr>
37
+ <th>新しいファイル</th>
38
+ <th>2019-06-08</th>
39
+ <td class="table_setting">
40
+ <div class="btn-group">
41
+ <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
42
+ <i class="glyphicon glyphicon-option-horizontal"></i>
43
+ </button>
44
+ <ul class="dropdown-menu dropdown-menu-right">
45
+ <li>
46
+ <a href="action_attribute.php?file_id=XX&action=favorite&token=">お気に入り</a>
47
+ </li>
48
+ <li>
49
+ <a href="">ファイル名の変更</a>
50
+ </li>
51
+ <li>
52
+ <a href="action_attribute.php?file_id=XX&action=delete&token=">ファイル削除</a>
53
+ </li>
54
+ </ul>
55
+ </div>
56
+ </td>
57
+ ```