回答編集履歴

ソースをひとまとめにして追記

2019/10/06 09:47

投稿

siruku6

スコア1382

test CHANGED Viewed

@@ -201,3 +201,253 @@
 ```
+### 追記
+次のような一つのhtmlファイルの状態にして、ファイルをダブルクリックしたところ、動作しました
+残念なところとしては、隠れた部分を表示したとき、カーソルの位置と文字の位置が合っていないところです。
+あくまで、できたのは「表示するだけ」になってしまっております....
+```html
+<!DOCTYPE html>
+<html lang="ja">
+    <head>
+      <title>Team1 Website</title>
+      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+      <style>
+      .box {
+          position: relative;
+          width: 200px;
+          height: 40px;
+          margin: 0;
+      }
+      .dammy,
+      .copy {
+          border: none;
+          padding: 0.75rem 1rem;
+          width: 100%;
+          height: 40px;
+          line-height: 1.5;
+          min-height: 40px;
+          font-size: 1.5rem;
+          font-family: sans-serif;
+          white-space: nowrap;
+          overflow: hidden;
+      }
+      .dammy {
+          position: absolute;
+          z-index: 1;
+          caret-color: blue;
+          border: none;
+          background: transparent;
+          color: transparent;
+          resize: none;
+      }
+      .copy {
+          height: auto;
+          position: relative;
+          z-index: 0;
+          background: #ddd;
+      }
+      .copy .within {
+          color: blue;
+          white-space: nowrap;
+          display: inline;
+      }
+      .copy .overed {
+          color: red;
+          white-space: nowrap;
+          display: inline;
+      }
+      /* style-sheet 追加 */
+      .right-aligned {
+        position: sticky;
+        right: 0;
+      }
+      </style>
+      <script>
+      // 入力
+      $( document ).on( 'input', '.dammy', function( e ){
+        const $dammy = $( this );
+        // 改行禁止
+        enter( $dammy, e );
+        // コピー
+        const lim = 5;
+        copy( $dammy, lim );
+      });
+      function enter( $dammy, e ){
+        $dammy.on( 'keydown', function( e ) {
+          // 改行禁止
+          if ( e.which == 13 ) {
+            return false;
+          // 横矢印キー押下時の動作
+          } else if ( e.which == 39 ) {
+            $('.within').addClass('right-aligned');
+          } else if ( e.which == 37 ) {
+            $('.within').removeClass('right-aligned');
+          }
+        });
+        const val = $dammy.val();
+        const reg = new RegExp( "[\r\n]", "g" );
+        if ( val.match(reg) ) {
+          const replace = val.replace( reg, '' );
+          $dammy.val( replace );
+        }
+      }
+      // コピー
+      function copy( $dammy, lim ){
+        const $copy = $dammy.next( '.copy' );
+        const val = $dammy.val();
+        // if ( val.length > lim ) {
+        const within = val //.substr( 0, lim );
+        // const overed = val.slice( lim );
+        $copy.html('<div class="within">' +within+ '</div>');
+        // $copy.append('<div class="overed">' +overed+ '</div>');
+        // } else {
+        //   $copy.html('<div><div class="within">' +val+ '</div></div>');
+        // }
+      }
+      </script>
+    </head>
+  <body>
+    <div class="box">
+      <textarea class="dammy"></textarea>
+      <div class="copy"></div>
+    </div>
+  </body>
+</html>
+```