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

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

ただいまの
回答率

90.50%

  • JavaScript

    16434questions

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

  • jQuery

    6711questions

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

  • Bootstrap

    962questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Dropboxのようなファイル名変更UIを実装したい

解決済

回答 3

投稿 編集

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

nexco

score 4

簡単なオンラインストレージを作成しています。
その中でファイル名の変更UI(?)を作りたいと思っているのですが、
JavaScriptの知識がなく、どのようにすれば分かりません。
(DBの変更など実際の処理は作成済みです。)

完成形としては画像のような

  1. ”ファイル名変更”をクリック
  2. ファイル名部分(”新しいファイル”)がテキストボックスになり編集可能状態に
  3. エンターで変更を確定
  4. 変更内容をpostで送信
  5. 【作成済み】受け取った値からDB内のファイル名を変更

GIFファイル。クリックで再生します。
イメージ説明

3.の部分は次のプラグインを使うことでできそうなのですが、
https://garafu.blogspot.jp/2015/09/jquery-complete.html
2.の部分が検討もつきません。

ヒント等でも結構ですので、お力添えをいただけると幸いです。
よろしくお願いいたします。

<table class="table table-striped table-hover">
<thead>
  <tr>
  <th class="col-md-8 col-xs-8">File Name</th>
  <th class="col-md-4 col-xs-4">Date</th>
  <th class="table_setting">
    <i class="glyphicon glyphicon-cog"></i>
  </th>
  </tr>
</thead>
<tbody>
<tr>
<th>新しいファイル</th>
<th>2019-06-08</th>
<td class="table_setting">
  <div class="btn-group">
    <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
      <i class="glyphicon glyphicon-option-horizontal"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-right">
      <li>
        <a href="action_attribute.php?file_id=XX&action=favorite&token=">お気に入り</a>
      </li>
      <li>
        <a href="">ファイル名の変更</a>
      </li>
      <li>
        <a href="action_attribute.php?file_id=XX&action=delete&token=">ファイル削除</a>
      </li>
    </ul>
  </div>
</td>

追記

3.エンターで変更を確定までのソースコード(仮)

<!--
テーブルのt1部分を入力とするコード
-->
<head>
  <title></title>
</head>
<body>
  <table id="outside">
    <tr>
      <td id="t1">one</td>
    </tr>
    <tr>
      <td id="t2">two</td>
    </tr>
  </table>
  <pre id="rslt" class="">&nbsp;</pre> <button onclick="replaceElement()">要素を置き換え</button> <input type="button" id="btn" class="btn btn-default" value="確定" />
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    function replaceElement() {
      var element = document.getElementById("t1");
      var newElement = document.createElement("input");
      newElement.setAttribute("type", "text");
      newElement.setAttribute("id", "ipt");
      newElement.setAttribute("value", document.getElementById("t1").innerHTML);
      var target = element.childNodes.item(0);
      element.replaceChild(newElement, target);
    }
    (function () {
      var oncomplete = function (event) {
        $('#rslt').html($('#ipt').val() || '&nbsp;');
      };
      var document_onready = function (event) {
        $('#ipt').complete(oncomplete);
        $('#btn').on('click', oncomplete);
      };
      $(document).ready(document_onready);
    })();
    (function (window, document, $, undefined) {
      /**
       * テキスト入力が確定したとき指定されたイベントハンドラを呼び出します。
       * @param handler {function} イベントハンドラ。イベントハンドラは jQuery.Event を引数にとる。
       * @return {jQuery} jQueryオブジェクト
       */
      $.fn.complete = function (handler) {
        var ENTER_KEY = 13;
        var keypressed = false;
        /**
         * keypressイベント発生時に呼び出されます。
         * @param event {jQuery.Event} イベントオブジェクト
         */
        var onkeypress = function (event) {
          if (event.keyCode !== ENTER_KEY) {
            return;
          }
          keypressed = true;
        };
        /**
         * keyupイベント発生時に呼び出されます。
         * @param event {jQuery.Event} イベントオブジェクト
         */
        var onkeyup = function (event) {
          if (event.keyCode === ENTER_KEY && keypressed) {
            // 入力確定のイベントを発生させます。
            handler.call(this, event);
          }
          keypressed = false;
        };
        // 各要素に対してイベントを付与します。
        return this.each(function (index) {
          $(this).on('keypress', onkeypress).on('keyup', onkeyup);
        });
      };
    })(window, document, jQuery);
  </script>
</body>
</html>

成果物

karamarimo様の回答がベースとなっています。

<head>
  <title></title>
</head>
<body>
  <table id="outside">
    <tr>
      <td>
        <form class="simple-form" id="t1">one</form>
      </td>
    </tr>
    <tr>
      <td id="t2">two</td>
    </tr>
  </table> <button onclick="replaceElement()">要素を置き換え</button>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript">

       function replaceElement() {
         //テキストボックスに変更
         var element = document.getElementById("t1");
         var newElement = document.createElement("input");
         newElement.setAttribute("type", "text");
         newElement.setAttribute("id", "ipt");
         newElement.setAttribute("value", document.getElementById("t1").innerHTML);
         var target = element.childNodes.item(0);
         element.replaceChild(newElement, target);
       }
       $(function () {
         $('.simple-form').on('submit', function () {
         //変更後の値を送信
           var $input = $(this).children('input[type=text]');
           var text = $input.val();
           var formdata = new FormData();
           formdata.append('newtext', text);
           $.ajax({
             url: 'action_rename.php',
             type: 'POST',
             data: formdata,
             cache: false,
             contentType: false,
             processData: false,
             dataType: 'text'
           }).done(function (j_data, textStatus, jqXHR) {
             alert('成功');
           }).fail(function (jqXHR, textStatus, errorThrown) {
             alert('失敗');
           });
           //テキストボックスを削除
           var node = document.getElementById("ipt");
           if (node.parentNode) {
             node.parentNode.removeChild(node);
           }
           //表示を変更後の値に変更
           var info = document.getElementById('t1');
           var textNode = document.createTextNode(text);
           info.appendChild(textNode);
           return false
         })
       })
  </script>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+2

基本的なDOM操作のやり方は分かりますか?(セレクタによる要素の選択、要素の追加・削除、attributeやテキストの取得・変更)

2. ファイル名部分(”新しいファイル”)がテキストボックスになり編集可能状態に

これはファイル名の要素をテキストボックスに置き換えればできます。

jQueryならば.replaceWith()でできます。
.replaceWith() - jQuery

3. エンターで変更を確定
3.の部分は次のプラグインを使うことでできそうなのですが、

日本語入力だと変換確定時のEnterでEnterキーのkeyUpが発生するからそれを避けたいと言うことだと思いますが、<form>でラップしてそのsubmitイベントで送信するようにすれば、それを気にする必要はありません。

わからない部分があれば質問してください。

 追記

DEMO(JSFiddle)

このようにinput要素が1つだけform内に存在する時、Enterキーを押すと自動でform全体がsubmitされます。複数あるときでも、form内にtype=submitなボタンが存在すれば同様になります。

デフォルトではsubmit時にページ遷移しようとしますが、submitイベントハンドラ内でfalseを返すか、イベントオブジェクトeに対してe.preventDefault()すれば防げます。

また、この方法であれば特別なことをしなくても、日本語変換確定のEnterでは送信されません。

関連リソース
Implicit Submission of Form When Pressing Enter Key

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/19 11:29 編集

    お返事ありがとうございます。
    教えていただいた事を参考に次の段階まで作成できたのですが、「エンターで確定」の部分が正しく動作しません。

    下記は
    https://garafu.blogspot.jp/2015/09/jquery-complete.html
    をそのまま使用しているのですが、

    >日本語入力だと変換確定時のEnterでEnterキーのkeyUpが発生するからそれを避けたいと言うことだと思いますが、<form>でラップしてそのsubmitイベントで送信するようにすれば、それを気にする必要はありません。

    という部分について詳しく教えていただけないでしょうか。

    JavaScriptの勉強は始めたばかりで、基本的なDOM操作すら怪しい状況です。
    リファレンスを片手にトライ&エラーで挑戦しているため、おかしい部分等あるかもしれませんがよろしくお願いいたします。

    キャンセル

  • 2017/12/19 12:17 編集

    コードの部分はとりあえず質問文に追記されたほうがよろしいかと思います。

    キャンセル

  • 2017/12/19 12:29

    ありがとうございます。
    ソースコードを質問文に追記させていただきました。

    キャンセル

  • 2017/12/19 12:51

    追記しました。

    キャンセル

  • 2017/12/20 10:14 編集

    ありがとうございます。
    多少修正する点は残っていますが、期待通りに解決いたしました。
    ご教授いただき誠にありがとうございました。

    キャンセル

+2

ソースがないのでなんとも言えませんが、
元の名前と新しい名前と名前変更であるフラグをajaxで送ればよいのではないでしょうか?
jQueryは単なるUIですからサーバー側のリネームはサーバー側のプログラムでやってください

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/18 12:21

    言葉足らずで申し訳ありません。
    だいたいどのようにすれば良いかは分かるのですが、実際に実装するスキルがない状態です。
    ライブラリなどがあれば教えてほしいという気持ちで質問しました。

    キャンセル

+2

丸投げのように感じるのが問題ですが、ヒントで良いという事なのでキーワードを示します。

1. ”ファイル名変更”をクリック

addEventListener で click イベントハンドラを定義。

2. ファイル名部分(”新しいファイル”)がテキストボックスになり編集可能状態に

createElement でinput要素ノードを生成し、replaceChild で該当テキストノードと入れ替える。

3. エンターで変更を確定

addEventListener で input イベントハンドラを定義。
createTextNode でテキストノードを生成し、replaceChild でinput要素ノードと入れ替える。

4. 変更内容をpostで送信

XMLHttpRequest または Fetch API で POST 送信。

5. 【作成済み】受け取った値からDB内のファイル名を変更

サーバサイドでUPDATE文のSQLクエリを発行。

Re: nexco さん

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

  • 解決済

    ネイティブのJSでデリゲートイベントを実装して子要素の情報を取得したいです

    前提・実現したいこと 現在、jQueryで書かれたコードをネイティブのJSに変換をしています。 その中でonイベントを使ってデリゲート処理を行っている箇所があり、 ネイティブのJS

  • 解決済

    jqueryのdieとliveについて

    $(document).ready(function(){ $("#hogehoge").die("change"); $("#hogehoge").live("c

  • 解決済

    BootstrapのModalにiframeを読み込ませたい

    こんにちは。 現在BootstrapのModal機能を使って、別ページのコンテンツを表示しようとしています。 具体的にはクリックイベント発生時、display:noneになって

  • 解決済

    jQueryの.match()に入れたい文字列が複数個ある場合

    前提・実現したいこと 下記ソースコードの.match()に、複数の文字列を入れて判定をしたいです。 現状では「オレンジ」のみ入っていますが、その他の「アップル」、「パイン」、「バナ

  • 解決済

    onclick時にaddClassが効かない

    html内で表示されているリストの表示を、検索の入力内容によって変動させたいのですが、jqueryのonclick時にaddClassが効いてくれません。 $('.serch-

  • 解決済

    【初心者】jquaryでマス目を作る

     前提・実現したいこと 最近Jsとjquaryの勉強を始めた初心者です。 4×4の16マスのマス目でルーレットを作っているのですが、マス目もjquaryで作ると言う課題が 理解出来

  • 解決済

    jQueryで配列のソートをしたい

     前提・実現したいこと jQueryで配列のソート機能を実現したい 配列に入ったそれぞれの値を下記のように昇順にソートしたいです。 「1」「2」「3」 ↓ 「3」「2」「1

  • 受付中

    jQueryで生成したセレクトボックスの値を取得したい

     前提・実現したいこと jQueryで生成したセレクトボックスの値を取得したいです。 該当のソースコードは、追加ボタンをクリックすると セレクトボックスが生成されていきます。

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

  • JavaScript

    16434questions

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

  • jQuery

    6711questions

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

  • Bootstrap

    962questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。