efo
小文字を大文字に変換する
onchange
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onblur
項目の色変わる
onfocus
<script>
function myFunction(x) {
x.style.background = "yellow";
}
https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onfocus
カーソル触れる
onkeydown onkeypress
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" onkeydown="myFunction()">
全角に キーアップ
onkeyup
苗字とかなの連動
onkeyup & valueの掛け合わせ
<form>
Enter your name:
<input type="text" name="myInput" onkeyup="writeMessage()" size="20">
<input type="text" name="mySecondInput" size="20">
</form>
function writeMessage() {
document.forms[0].mySecondInput.value = document.forms[0].myInput.value;
}
https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onkeyup2
keydown & up
<input
type="text"
onkeydown="color('yellow')"
onkeyup="color('white')"
name="myInput">
</form>
https://www.w3schools.com/js/tryit.asp?filename=tryjs_events_onkeydownup
カーソルを当てると変化
onmouseover
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1>
onmousedown="myFunction(this,'red')" onmouseup
ヒートマップに使えそう
座標1
https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_event_clientxy
2
https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_event_screenxy
遷移分析に使えそう
history.length;
https://www.w3schools.com/js/tryit.asp?filename=tryjs_history_length
ユーザーのブラウザー分析
navigator
navigator.userAgent
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36