イベントを別のイベントでシミュレートする

Event

contentEditable="true" document.selection.createRange()

aaaa
bbbb
cccc
dddd
Apple-tab-span

insertTab

initEvent dispatchEvent

a https://developer.mozilla.org/ja/DOM/document.createEvent
view source

JavaScript

function insertTab(o, e)
{
	var kC = e.keyCode ? e.keyCode : e.charCode ? e.charCode : e.which;
	if (kC == 9 && !e.shiftKey && !e.ctrlKey && !e.altKey)
	{
    console.log(o.setSelectionRange);
    console.log(o.createTextRange);
    console.log(e.preventDefault);
		var oS = o.scrollTop;
		if (o.setSelectionRange)
		{
			var sS = o.selectionStart;
			var sE = o.selectionEnd;
			o.value = o.value.substring(0, sS) + "\t" + o.value.substr(sE);
			o.setSelectionRange(sS + 1, sS + 1);
      console.log(sS);
			o.focus();
		}
		else if (o.createTextRange)
		{
			document.selection.createRange().innerHTML = "\t";
			e.returnValue = false;
		}
		o.scrollTop = oS;
		if (e.preventDefault)
		{
			e.preventDefault();
		}
		return false;
	}
	return true;
}


$(function(){

  $('a').click(function(){console.log($(this))});


  $('a.simu').mouseover(function(){
    var clickEvent = document.createEvent("MouseEvents")
    clickEvent.initEvent("click", true, true);
    $(this)[0].dispatchEvent(clickEvent);
  });

  $('.insertTab').keydown(function(e){
    var o = $(this)[0];
    insertTab(o, e);
  });




  $(document).on('keydown', '[contenteditable="true"]', function(e){
    var ele = $(e.target);
    console.log(e);
    var o = ele[0];
    if(e.which === 9){
      console.log(o);
			var sS = o.selectionStart || 0;
			var sE = o.selectionEnd || 0;
      var sel = getSelection();
      console.log(sel);
      console.log(sel.anchorNode);
      console.log(sel.focusNode);
      console.log(sel.focusNode.textContent);
      sel.focusNode.textContent = '\t' + sel.focusNode.textContent;
      //var pos = doGetCaretPosition(o);
		  document.createRange().text = 'aaaaa';
			o.focus();
      return false;
    }
  });


  //イベントパブリングをのみを停止
  //event.stopPropagation();
  //ブラウザ標準のイベントのみを停止(クリック時のリンクやドラッグ時でのファイル展開など)
  //event.preventDefault();
});

CSS

#demo div{
  padding:1em;
  border:1px solid rgba(0,0,0,.5);
}

HTML

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

view-source:https://hi0a.com/demo/-js/js-event/

ABOUT

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

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

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

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

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

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

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

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