JSFiddle - React, Tailwind, and code Playground

by jfreiheit

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>focus, blur, input</title>
</head>
<body>
<input type="text" id="eingabe" 
       onblur="allesInGrossbuchstaben()" 
       onfocus="hintergrundGelb(this)" 
       oninput="wiedergabe()">
<p id="spiegel"></p>
</body>
</html>

JavaScript

function hintergrundGelb(x) {
	x.style.background = "yellow";
}

function allesInGrossbuchstaben() {
	let x = document.getElementById("eingabe"); 
	x.value = x.value.toUpperCase();
}

function wiedergabe() {       
	let x = document.getElementById("eingabe").value;        
	document.getElementById("spiegel").innerHTML = "Deine Eingabe: " + x;
}