GvYpdG

gvypdg.markdown

GvYpdG

A Pen by LazyGyu on CodePen.

License.

index.html

<div class="customCursor">
  <input type="text" maxlength="24" />
  <span class="p"></span>
</div>
<div>
  <button type="button" id="btn_type1">타입1</button>
  <button type="button" id="btn_type2">타입2</button>
  <button type="button" id="btn_type3">타입3</button>
</div>

script.js

class CustomCursorInput{
  constructor(el){
    this.el = el;
    this.input = el.querySelector("input");
    this.caret = el.querySelector("span.p");
    this.span = document.createElement("span");
    const inputStyle = getComputedStyle(this.input);
    this.span.style.fontFamily = inputStyle.fontFamily;
    this.span.style.fontSize = inputStyle.fontSize;
    this.span.style.fontWeight = inputStyle.fontWeight;
    this.span.style.padding = "none";
    this.span.style.margin = "none";
    this.span.style.position = "absolute";
    this.span.style.top = "-9999px";
    document.body.appendChild(this.span);
    
    this.repositionCaret = this.repositionCaretFunc.bind(this);
    this.compositionStartCaret = this.compositionCaretFunc.bind(this, 'start');
    this.compositionEndCaret = this.compositionCaretFunc.bind(this, 'end');
    
    this.input.addEventListener("mouseup", this.repositionCaret);
    this.input.addEventListener("keydown", this.repositionCaret);
    this.input.addEventListener("keyup", this.repositionCaret);
    this.input.addEventListener("mousedown", this.repositionCaret);
    this.input.addEventListener("compositionstart", this.compositionStartCaret);
    this.input.addEventListener("compositionend", this.compositionEndCaret);
    
  }
  
  compositionCaretFunc(tp){
    if( tp == 'start' ){
      this.caret.classList.add('ing');
    }else{
      this.caret.classList.remove('ing');
    }
  }
  
  repositionCaretFunc(){
    const st = this.input.selectionEnd;
    const str = this.input.value.substr(0, st);
    this.span.innerHTML = str.replace(/ /g, ' ');
    const w = getComputedStyle(this.span).width;
    this.caret.style.left = w;
  }
}

const cc = new CustomCursorInput(document.querySelector("div.customCursor"));
document.querySelector("#btn_type1").addEventListener("click", (e)=>{
  ["type2",  "type3"].forEach(cl=>cc.caret.classList.remove(cl));
});
document.querySelector("#btn_type2").addEventListener("click", (e)=>{
  ["type2",  "type3"].forEach(cl=>cc.caret.classList.remove(cl));
  cc.caret.classList.add("type2");
});
document.querySelector("#btn_type3").addEventListener("click", (e)=>{
  ["type2",  "type3"].forEach(cl=>cc.caret.classList.remove(cl));
  cc.caret.classList.add("type3");
});

style.css

.customCursor {
  position:relative;
  border:solid 1px black;
  width:300px;
  height:30px;
}
.customCursor input {
  caret-color:transparent;
  background:transparent;
  padding:0; margin:0;
  border:none;
  width:100%;
  height:100%;
  position:absolute;
}

@keyframes cursorAnim {
  0% { opacity:0; }
  50% { opacity:1; }
  100% { opacity:0; }
}



.customCursor span.p {
  position:absolute;
  display:block;
  width:5px;
  height:100%;
  bottom:0;
  background:rgba(33,66,99,0.7);
  animation:cursorAnim .5s infinite;
}

.customCursor span.p.ing {
  width:14px;
}

.customCursor span.p.type2 {
  width:7px;
  height:5px;
  bottom:0;
  background-color:green;
}

.customCursor span.p.type2.ing {
  width:14px;
  height:100%;
}

.customCursor span.p.type3 {
  background-color:pink;
  width:1px;
  height:100%;
}
.customCursor span.p.type3.ing {
  background-color:red;
  width:14px;
  height:100%;
}