Неплохое текстовое поле - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<div class="terrible-text">

	<label for="name">Just try writing your name...</label>

	<br>

	<input id="name" type="text" onkeypress="return false;" autocomplete="off"></input>

	<br>

	<span id="help">?</span><span>Maybe by entering the next letter to the one you want to enter...</span><em id="text">WARNING! Caps lock is ON. Please, disable it.</em>

</div>

body {

	margin: 0;

	height: 100vh;

	background: linear-gradient(315deg, #0d0a0b 0%, #607d8b 75%);

	display: flex;

	justify-content: center;

	align-items: center;

	overflow: hidden;

	font-size: 5vmin;

	font-family: Arial, Helvetica, serif;

	text-align: center;

	background-color: #4c4177;

	background-image: linear-gradient(315deg, #4c4177 0%, #2a5470 74%);

}



label {

	color: #ffffff80;

	text-shadow: 1px 1px 1px #00000045, 0px 0px 1px #0078c900;

	font-size: 4vmin;

}



input {

	font-size: 5vmin;

	padding: 0.5vmin;

	background: #202020;

	border-radius: 0.25vmin;

	border: 0;

	color: #607d8b;

	box-shadow: 0.05vmin 0.05vmin 0.5vmin 0 inset #000,

		0.05vmin 0.05vmin 0.5vmin 0 #607d8b9c;

	margin: 2vmin 0;

	outline: none;

	text-align: center;

	line-height: 6vmin;

	text-shadow: 0 -1px 1px #fff8;

}



span {

	font-size: 2.1vmin;

	color: #fff;

	opacity: 0;

	float: left;

	padding: 0.5vmin;

	transition: all 0.5s ease 0s;

	line-height: 2vmin;

}



span#help {

	background: #607d8b;

	border-radius: 100%;

	width: 2vmin;

	height: 2vmin;

	display: none;

	opacity: 0.5;

	font-weight: bold;

	float: right;

	box-shadow: 1px 1px 1px #0000006e;

}



span#help:hover {

	background: red;

	transition: all 0.5s ease 0s;

	cursor: pointer;

}



span#help:active + span {

	opacity: 0.5;

	transition: all 0.5s ease 0s;

}



span#help:hover:active {

	background: #1095ff;

	transition: all 0.5s ease 0s;

}



span#help:hover:after {

	content: "Are you sure? Try to deduce the trick... or click if you want help \00A0 \00A0 \00A0 ";

	width: 100%;

	display: block;

	position: absolute;

	left: 0;

	top: calc(50% + 7.5vmin);

	font-weight: normal;

}



span#help:hover:active:after {

	opacity: 0;

}



em#text {

	color: red;

	display: none;

	font-size: 2.5vmin;

	top: 50%;

	position: absolute;

	width: 100%;

	text-align: center;

	left: 0;

}

var field = document.getElementById("name");

var help = document.getElementById("help");

var field = document.getElementById("name");



document.addEventListener("keydown", logKey);



function logKey(e) {

  //caps warning

  if (e.getModifierState("CapsLock")) {

    text.style.display = "block";

    field.setAttribute("disabled", "disabled");

  } else {

    text.style.display = "none";

    field.removeAttribute("disabled");

    field.focus();

  }

  //console.log( e.key.charCodeAt() );

  var cd = e.key.charCodeAt();

  var ch = parseInt(cd - 1);



  if (

  cd >= 49 && cd <= 57 && !field.disabled ||

  cd >= 98 && cd <= 122 && !field.disabled)

  {

    field.value = field.value + String.fromCharCode(ch);

  }

  //space

  if (cd == 32) {

    field.value = field.value + String.fromCharCode(32);

  }

  //9

  if (cd == 48) {

    field.value = field.value + "9";

  }

  //z

  if (cd == 97) {

    field.value = field.value + "z";

  }

  //show help

  if (field.value != "" && field.value.length != 1) {

    help.style.display = "block";

  } else {

    help.style.display = "none";

  }

}



window.onload = function () {

  field.focus();

};

//# sourceURL=pen.js