contenteditable within progress

6445 ワード
progress contenteditable linecount contenteditable テキストリンク 
<div class="f rel">
 <div class="rel" contenteditable="plaintext-only"></div>
 <progress class="abs rt" value="1" max="10"></progress>  
</div>

.rel{position:relative}
.abs{position:absolute}
.f{background-color:aliceblue;width:44rem;min-height:6rem}
.f>*{width:100%}
.f>progress{top:0;height:3px;}
.f>[contenteditable]{outline:none;padding:0.4rem;height:auto}
/*prefix chrome only*/
@mixin progress(){
 progress{-webkit-appearance: none;appearance: none;}
 progress::-webkit-progress-bar{background:#0a2133;}
 progress[value]::-webkit-progress-value {background:#961241;transition:all 0.2s linear}
 progress{width:100%;height:3px;}
 progress:after{content:attr(value)'/'attr(max);position:absolute;}
;
}@include progress()
;
/*local*/
progress.rt:after{top:0;right:0;} 

let fn={}
fn.q=(d=>document.querySelector(d))
;
fn.q('[contenteditable]').oninput =function(ev){
 fn.q('.f>progress').value=this.innerHTML.split('\n').length||1
}
;