textarea内に文字を挿入

a b c d e ◆

スマートフォンだと、キーボードが出て重くなる問題

view source

JavaScript

$(function(){
  var target = $('#target');
  target[0].selectionStart = target.val().length;
  target[0].selectionEnd = target.val().length;
/*
  target.on('click', function(){
    $(this).removeAttr('disabled');
  });
*/
  var btn = $('.buttons a');
  btn.on('click', function(){
    //target.attr({disabled: 'disabled'});//キーボードは出なくなるが、処理が重くなる？
    var val = target.val();
    var text = $(this).text();
    var start = target[0].selectionStart;
    var end = target[0].selectionEnd;
    var before = val.slice(0, start);
    var after =  val.slice(end, val.length);
    
    target.val(before + text +  after);
    target[0].selectionStart = start + text.length;
    target[0].selectionEnd   = start + text.length;
    console.log(target[0].selectionStart);
    target.focus();
    return false;
  });
});

CSS

textarea{
  width:100%;
  height:80px;
}
.buttons{
  -webkit-user-select:none;
  user-select:none;
}
.buttons a{
  display:inline-block;
  width:60px;
  text-align:center;
  line-height:40px;
  font-weight:bold;
  margin:1px 0;
  border:1px solid #000000;
  cursor:pointer;
}
.buttons a:hover{
  background-color:#000000;
  color:#ffffff;
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-testarea-manager/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。