Kater-auf-Dach · September 27, 2015 16:36
diff --git a/ChangeRegistr.html b/ChangeRegistr.html
 <!DOCTYPE html>
 <html>

 <head>
  <meta charset="utf-8">
  <title>Изменение регистра текста</title>

  <style media="screen">
    * {box-sizing: border-box;}

    form {
      width: 80%;
      margin: 0 auto;
      padding: 40px 20px;
    }

    fieldset {
      margin-bottom: 20px;
      padding: 40px 20px;
      border: 2px solid #3f51b5;
    }

    legend {
      font-size: 24px;
      font-style: italic;
      font-weight: 700;
    }

    textarea {
      display: block;
      width: 100%;
      margin-bottom: 50px;
      padding: 30px;
      font-size: 22px;
    }

    input,
    label {
      display: inline-block;
      margin-bottom: 30px;
      font-size: 20px;
      cursor: pointer;
    }
    input {margin-right: 10px;}

    button {
      margin-left: 5px;
      padding: 10px 30px;
      background-color: #2196f3;
      color: #fff;
      text-transform: uppercase;
      border: none;
      outline: none;
    }
    button:hover {background-color: #0d47a1;}
    button:acive {background-color: #42a5f5;}

    cite {
      font-style: italic;
      float: right;
      text-align: right;
    }

    .cut-succes,
    .cut-unsucces,
    .no-text {
      display: none;
      width: 30%;
      margin: 0 auto 40px auto;
      padding: 30px;
      text-align: center;
      font-weight: 700;
      border: 1px solid #3f51b5;
    }

    .cut-succes span {text-transform: uppercase;}

    .cut-unsucces,
    .no-text {
      text-transform: uppercase;
      border: 1px solid red;
    }
  </style>
 </head>

 <body>
  <form>
    <fieldset>
      <legend>Изменение регистра текста</legend>
      <textarea class="regform__text" rows="5" placeholder="Вставьте текст (мышкой или Ctrl + v)" autofocus></textarea>
      <p class="cut-succes"><span>Всё! </span>Текст изменен и скопирован на мышку</p>
      <p class="cut-unsucces">Упс, не вышло... (сообщите об этом мне)</p>
      <p class="no-text">Вы не вставили текст</p>
      <div>
        <input type="radio" id="caseRegUp" name="caseReg" value="upper">
        <label for="caseRegUp">Верхний регистр</label>
      </div>
      <div>
        <input type="radio" id="caseRegLow" name="caseReg" value="lower">
        <label for="caseRegLow">Нижний регистр</label>
      </div>
      <button type="button" name="clear" class="clear">Очистить поле</button>
    </fieldset>
    <cite>by KM for Matrix
      <br>(принимаю печенюшки)
    </cite>
  </form>
  <script>
    var textForm = document.querySelector('.regform__text'),
      inputs = document.getElementsByName('caseReg'),
      clear = document.querySelector('.clear'),
      cutSucces = document.querySelector('.cut-succes'),
      cutUnSucces = document.querySelector('.cut-unsucces'),
      noText = document.querySelector('.no-text');

    function setDisplayNone() {
      cutSucces.style.display = 'none';
      cutUnSucces.style.display = 'none';
      noText.style.display = 'none';
    }

    function cutText() {
      if (textForm.value != '') {
        textForm.select();
        var successful = document.execCommand('cut');
        var msg = successful ? 'successful' : 'unsuccessful';
        if (msg === 'successful') {
          cutSucces.style.display = 'inline-block';
        } else {
          cutUnSucces.style.display = 'inline-block';
        }
      } else {
        cutSucces.style.display = 'none';
        cutUnSucces.style.display = 'none';
        noText.style.display = 'inline-block';
      }
    }

    for (var i = 0; i < inputs.length; i++) {
      inputs[i].onclick = function(event) {
        inText = textForm.value;
        outText = (event.target.value === 'upper') ? inText.toUpperCase() : inText.toLowerCase();
        textForm.value = outText;
        cutText();
      }
    };
    textForm.onfocus = function(event) {
      setDisplayNone();
    }
    clear.onclick = function(event) {
      textForm.value = '';
    }
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<title>Изменение регистра текста</title>

	<style media="screen">
	* {box-sizing: border-box;}

	form {
	width: 80%;
	margin: 0 auto;
	padding: 40px 20px;
	}

	fieldset {
	margin-bottom: 20px;
	padding: 40px 20px;
	border: 2px solid #3f51b5;
	}

	legend {
	font-size: 24px;
	font-style: italic;
	font-weight: 700;
	}

	textarea {
	display: block;
	width: 100%;
	margin-bottom: 50px;
	padding: 30px;
	font-size: 22px;
	}

	input,
	label {
	display: inline-block;
	margin-bottom: 30px;
	font-size: 20px;
	cursor: pointer;
	}
	input {margin-right: 10px;}

	button {
	margin-left: 5px;
	padding: 10px 30px;
	background-color: #2196f3;
	color: #fff;
	text-transform: uppercase;
	border: none;
	outline: none;
	}
	button:hover {background-color: #0d47a1;}
	button:acive {background-color: #42a5f5;}

	cite {
	font-style: italic;
	float: right;
	text-align: right;
	}

	.cut-succes,
	.cut-unsucces,
	.no-text {
	display: none;
	width: 30%;
	margin: 0 auto 40px auto;
	padding: 30px;
	text-align: center;
	font-weight: 700;
	border: 1px solid #3f51b5;
	}

	.cut-succes span {text-transform: uppercase;}

	.cut-unsucces,
	.no-text {
	text-transform: uppercase;
	border: 1px solid red;
	}
	</style>
	</head>

	<body>
	<form>
	<fieldset>
	<legend>Изменение регистра текста</legend>
	<textarea class="regform__text" rows="5" placeholder="Вставьте текст (мышкой или Ctrl + v)" autofocus></textarea>
	<p class="cut-succes"><span>Всё! </span>Текст изменен и скопирован на мышку</p>
	<p class="cut-unsucces">Упс, не вышло... (сообщите об этом мне)</p>
	<p class="no-text">Вы не вставили текст</p>
	<div>
	<input type="radio" id="caseRegUp" name="caseReg" value="upper">
	<label for="caseRegUp">Верхний регистр</label>
	</div>
	<div>
	<input type="radio" id="caseRegLow" name="caseReg" value="lower">
	<label for="caseRegLow">Нижний регистр</label>
	</div>
	<button type="button" name="clear" class="clear">Очистить поле</button>
	</fieldset>
	<cite>by KM for Matrix
	<br>(принимаю печенюшки)
	</cite>
	</form>
	<script>
	var textForm = document.querySelector('.regform__text'),
	inputs = document.getElementsByName('caseReg'),
	clear = document.querySelector('.clear'),
	cutSucces = document.querySelector('.cut-succes'),
	cutUnSucces = document.querySelector('.cut-unsucces'),
	noText = document.querySelector('.no-text');

	function setDisplayNone() {
	cutSucces.style.display = 'none';
	cutUnSucces.style.display = 'none';
	noText.style.display = 'none';
	}

	function cutText() {
	if (textForm.value != '') {
	textForm.select();
	var successful = document.execCommand('cut');
	var msg = successful ? 'successful' : 'unsuccessful';
	if (msg === 'successful') {
	cutSucces.style.display = 'inline-block';
	} else {
	cutUnSucces.style.display = 'inline-block';
	}
	} else {
	cutSucces.style.display = 'none';
	cutUnSucces.style.display = 'none';
	noText.style.display = 'inline-block';
	}
	}

	for (var i = 0; i < inputs.length; i++) {
	inputs[i].onclick = function(event) {
	inText = textForm.value;
	outText = (event.target.value === 'upper') ? inText.toUpperCase() : inText.toLowerCase();
	textForm.value = outText;
	cutText();
	}
	};
	textForm.onfocus = function(event) {
	setDisplayNone();
	}
	clear.onclick = function(event) {
	textForm.value = '';
	}
	</script>
	</body>

	</html>