回答編集履歴

追記：選択の動作について

2019/10/08 08:37

投稿

mix-peach

スコア1910

test CHANGED Viewed

@@ -143,3 +143,145 @@
 ご参考までに。。^^
+---
+コメント欄で話に出た「選択の動作」について追記します。
+現状の入力欄は、```textarea```で、```overflow:hidden```に設定されているため、
+そもそもこの入力欄自体が、話にでたような「選択の動作」を行ってくれません。
+なので、これを実現するためには、```textarea```自体に工夫が必要になります。
+試しに、
+マウスをクリックしてから離すまでの間、```textarea```の左右のスクロールを自動で調整するようにしてみました。
+```javascript
+  var scroller = false, dammy = false, mouse = false;
+  $( document ).on('mousedown', '.dammy', function(){
+    //.dammyの上でマウスクリックが始まった場合に、自動スクロールの処理を繰り返し動作させます
+    dammy = this;
+    scroller = setInterval(dammy_scroll, 20);
+  }).on('mousemove', function(){
+    //画面内で移動したマウスのポジションを使いたいのでここで保持しておきます。
+    mouse = event;
+  }).on('mouseup', function(){
+    //どこかでマウスクリックが終わったら、繰り返し処理を削除します。
+    if(scroller){
+         scroller = clearInterval(scroller);
+    }
+    dammy = false;
+  });
+  function dammy_scroll(){
+    if(!dammy){
+      return ;
+    }
+    if($(dammy).offset().left > mouse.clientX){ //入力欄エリアよりも、マウスが左側にいる
+       $(dammy).scrollLeft($(dammy).scrollLeft() - 5);
+    }else if(($(dammy).offset().left + $(dammy).width()) < mouse.clientX){//入力欄エリアよりも、マウスが右側にいる
+        $(dammy).scrollLeft($('.dammy').scrollLeft() + 5);
+    }
+    //divのスクロール量を、textareaに合わせます。
+    $(dammy).next('.copy').scrollLeft($(dammy).scrollLeft());
+  }
+```
+自動のスクロールを5pxにしたので、通常の「選択の動作」よりも若干ゆっくりですが、
+大体似たような感じになった気がします。
+ちなみに。
+●```textarea```の、```overflow:hidden```を削除する（これだと、幅を超える文字数を入力した時に、スクロールバーが見えてしまいますので、そちらを隠す方法を検討する必要がありますね・・）
+●```textarea```ではなく```input```に変更する
+のどちらかが可能なのであれば、
+textarea/input自体が、話に出た「選択の動作」をしてくれるので、上記のようなコードは不要となり、
+```javascript
+var dammy= false;
+//画面外でマウスクリックが終わった時も反応したいので、イベント設定対象はdocumentに。
+$(document).on('mousedown', '.dammy',function(){
+  dammy= this;
+}).on('mouseup', function(){
+  if(dammy)
+    $(dammy).next('.copy').scrollLeft($(dammy).scrollLeft());
+  }
+  dammy = false;
+});
+```
+とするだけでも、再現は出来そうでしたよ。
+※追記のコードは、windowsのChromeで軽く動作確認しただけのものなので、その点はご了承を。