input type:text 타이핑 시 이벤트 조작

<div class="wrap">
  <input type="text" value="" placeholder="입력하세요" />
  <span>원</span>
</div>

.wrap{
  position:relative;
  display : inline-block;
}
.wrap input{
  width:240px;
  height:30px;
  border:1px solid #aaa;
  border-radius:4px;
  text-align:right;
  box-sizing:border-box;
}

input:not(:placeholder-shown){  /* input박스에 placeholder가 사라졌을 때 (=내용이 입력됐을 때) */
  padding-right:24px;
}
input:not(:placeholder-shown) +span{
  display:block;
}

.wrap span{  /* span의 위치를 잡아준 뒤 display:none */
  position: absolute;
  right:6px;
  top : 5px;
  z-index:1;
  display:none;
}