JSFiddle - React, Tailwind, and code Playground

by Marcel Hochman

HTML

<div class="boite">
      <div class="saisie">
        <span class="numero">1</span>
         <textarea id="zonetexte" autofocus></textarea>
        <div id="ok">
             <input id="ok" type="submit" name="submit" class="btn btn-success" value="ok" 
       </div>
    </div>
</div>

CSS

.saisie {
    position: relative;
    width: 400px;
    height: 200px;
    line-height: 25px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 0;
}
.saisie .numero {
    position: absolute;
    display: inline-block;
    margin: 0 auto;
    width:2em;
    left: -1.3em;
    top:40%;
    font-size: 300%;
    text-align:left;
}
.saisie textarea {
    border:6px solid blue;
    border-radius:15px;
    padding:7px;
    fontfamily: Arial;
    font-size: 24px;
    display: block;
    width: 100%;
    height: 100%; 
    box-sizing: border-box;
    outline:none;
    resize:none;
}
.saisie #ok {
    position: absolute;
    display: inline-block;
    margin: 0 auto;
    left: 205px;
    top:5px;
    visibility: hidden;
}
     display: inline-block;
     left: 2em;
     margin: 0 auto;
    text-align:center;     
 }

JavaScript

var zonetexte = document.getElementById('zonetexte');
zonetexte.addEventListener("input", function(){
var zonetexte = document.getElementById('zonetexte');
zonetexte.addEventListener("input", function(){
   if(zonetexte.value.length >= 10) {
       if(zonetexte.value.length == 10) {
           document.getElementById("ok").style.visibility= 'visible' ; 
       }
    }
 });