计算输入符号的文本区域

Question

function someFunc(){
	var integer = document.getElementById('email').value.toString().length;
    var symbolCount = 0 + integer;
    // var last2 = 100 - integer2;

    if (symbolCount >= 100) {
        document.querySelector('.hidden_block').style.color = 'green';
    } 
    else if (symbolCount <= 100) {
    	 document.querySelector('.hidden_block').style.color = 'black';
    	 document.querySelector('.error').style.display = "block";
    } 
    else {
        document.getElementById('max').style.color = 'black';
    } 
   	
    document.getElementById('symbol_count').innerHTML = symbolCount;
}
email.addEventListener("click", function(){	
	document.querySelector('.hidden_block').style.display = 'block';
	document.getElementById('max').style.display = 'none';
});	

#max, #max2 {
	text-align: right;
	margin-right: 55px;
}
.hidden_block {
	display: none;
	text-align: right;
	margin-right: 55px;
}
.error {
	display: none;
	color: red;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<label for="email">Positive</label>
<textarea type="email" class="form-control" id="email" oninput="someFunc()"  placeholder="Tell people about your experience: describe the place or activity, recommendations for travelers?"></textarea>
<p id="max">Minimal length - symbols</p>
<div class="hidden_block">
  <span id="count">Symbols : <span id="symbol_count">0 </span> (minimum:100)</span>
</div>
 <span class="error">Your review must be at least 100 characters long. Adding details really helps travelers.</span>

大家好。我有一个简单的 textarea 字段。我需要实现类似 that 的东西。当你写的少于 100 个字并单击电子邮件 ID 的外部时，边框颜色必须为红色。并且错误类必须显示。如果 textarea 字段为空，我需要显示 id max 的标签 p 如果用户将写任何符号，则 id max 必须显示无。谢谢帮助

Answer 1

function someFunc(){
	var integer = document.getElementById('email').value.toString().length;
    var symbolCount = 0 + integer;
    var integerValue = document.getElementById('email');
    var hidden_block = document.querySelector('.hidden_block');
    var max = document.getElementById('max');
    var error = document.querySelector('.error');
    var positive = document.getElementById("positive");
    // var last2 = 100 - integer2;
    if (integer >= 1) {
		hidden_block.style.display = 'inline-block';
		max.style.display = 'none';
		integerValue.classList.add("form-control");
	}	else {
		hidden_block.style.display = 'none';
		max.style.display = 'block';
		error.style.display = "none";
		positive.style.color = "#002C38";
		integerValue.classList.remove("form-redBorder");
	}
	integerValue.addEventListener("click", function(){	
		error.style.display = "none";
		positive.style.color = "#002C38";
		integerValue.classList.remove("form-redBorder");
    });
	//Red error and border
	document.body.addEventListener("click", function(e) {
  	var target = e.target || e.srcElement;
  
	  if (target !== integerValue && !isChildOf(target, integerValue)) {
	    error.style.display = "inline-block";
	    integerValue.classList.add("form-redBorder");
	    positive.style.color = "red";

	  } if (integer >= 100) {
	  	error.style.display = "none";
	  	integerValue.classList.remove("form-redBorder");
	  	positive.style.color = "#002C38";
	  }
	}, false);

	function isChildOf(child, parent) {
	  if (child.parentNode === parent) {
	    return true;
	  } else if (child.parentNode === null) {
	    return false;
	  } else {
	    return isChildOf(child.parentNode, parent);
	  }
	}
	//Finished Red error and border 
	//Start to count symbols
    if (symbolCount >= 100) {
        hidden_block.style.color = 'green';
        
    } 
    else if (symbolCount <= 100) {
    	 hidden_block.style.color = 'black';
    } 
    else {
        max.style.color = 'black';
        // document.getElementById('max2').style.color = 'black';
    } 
   	
    document.getElementById('symbol_count').innerHTML = symbolCount;
}

#email {
	display: block;
	padding: 6px 12px;
	margin: 0 auto;
	width: 90% !important;
	height: 120px !important;
	/*border:1px solid #44A1B7 !important;*/
}
.form-control {
	margin: 0 auto;
	width: 90% !important;
	height: 120px !important;
	border:1px solid #44A1B7;
}
#positive, #negative {
	padding: 14px 15px 1px 55px;
	color: #002C38;
	font-size: 18px;
} 
.form-redBorder {
	margin: 0 auto;
	border:1px solid #FF0000 !important;
}
#max, #max2 {
	position: absolute;
	right: 1%;
	margin-right: 55px;
}
.hidden_block {
	position: absolute;
	right: 1%;
	display: none;
	text-align: right;
	margin-right: 55px;
}
.error {
	margin-left: 55px;
	display: none;
	color: #FF0000;
}

<form role="form">
   <div class="form-group">
      <p class="help-block">About youre site.</p>
   <label for="email" id="positive">Positive</label>
 <textarea type="email" id="email" oninput="someFunc()" placeholder="Your review must be at least 100 characters long<br> Adding details really helps travelers"></textarea>
<p id="max">(100 character minimum)</p><div class="hidden_block">
 <span id="count">Symbols : <span id="symbol_count">0 </span> (min:100)</span>
 </div>
<span class="error">Your review must be at least 100 characters long.<br> Adding details really helps travelers..</span>
</div>

 </form>