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

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

完成形としては画像のような
0. ”ファイル名変更”をクリック
0. ファイル名部分（”新しいファイル”）がテキストボックスになり編集可能状態に
0. エンターで変更を確定
0. 変更内容をpostで送信
0. 【作成済み】受け取った値から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>

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

回答3件

ベストアンサー

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

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

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

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

エンターで変更を確定

3.の部分は次のプラグインを使うことでできそうなのですが、

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

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

追記

DEMO(JSFiddle)

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

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

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

投稿2017/12/18 06:12

編集2017/12/19 03:50

karamarimo

総合スコア2551

nexco

2017/12/19 03:22 編集

お返事ありがとうございます。教えていただいた事を参考に次の段階まで作成できたのですが、「エンターで確定」の部分が正しく動作しません。下記は https://garafu.blogspot.jp/2015/09/jquery-complete.html をそのまま使用しているのですが、＞日本語入力だと変換確定時のEnterでEnterキーのkeyUpが発生するからそれを避けたいと言うことだと思いますが、<form>でラップしてそのsubmitイベントで送信するようにすれば、それを気にする必要はありません。という部分について詳しく教えていただけないでしょうか。 JavaScriptの勉強は始めたばかりで、基本的なDOM操作すら怪しい状況です。リファレンスを片手にトライ＆エラーで挑戦しているため、おかしい部分等あるかもしれませんがよろしくお願いいたします。