计算输入符号的文本区域

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>

嗨 everyone.I 有一个简单的文本区域 field.I 需要实现类似 that 的东西。当你写的少于 100 个单词并单击电子邮件 ID 的外部时，边框颜色必须 red.And 错误 class 必须 displayed.And 我需要如果 textarea 字段为空 id max 的标签 p 必须是显示块如果用户要写任何符号 id max 必须 bu显示 none.Thanks 寻求帮助

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>

计算输入符号的文本区域

Textarea which counting entered symbolys

javascript

tripadvisor