JSFiddle - React, Tailwind, and code Playground

by junkoro

HTML

<div id="out" style="margin-bottom:12px;">ステータスがここに出るよ</div>
<input id="ti" type="text" value="クリックしてフォーカス！" onmousedown="onMouseDown()" onfocus="onFocus()" onmouseup="onMouseUp()" onkeypress="onKeyPress(event)">

JavaScript

var out = document.getElementById('out');
var ti = document.getElementById('ti');
var lastActiveElement;

function onMouseDown() {
    out.innerHTML = "マウスダウン";
    //この時点ではまだフォーカスが移っていない
    lastActiveElement = document.activeElement;
}

function onFocus() {
    out.innerHTML = "フォーカス";
}

function onMouseUp() {
    var txt = "マウスアップ:"
    if (lastActiveElement == document.activeElement) {
      txt += "すでに自分にフォーカスがあった";
    } else {
      txt += "他の場所からフォーカスが移った";
      ti.select(0, ti.value.length); //全選択
    }
    out.innerHTML = txt;
}

function onKeyPress(event) {
    var keycode = event.keyCode;
    out.innerHTML = "キープレス: keycode=" + keycode;
}