HTMLInputElement: selectionEnd property

<!-- 텍스트 인풋이 아닌 요소에 selectionEnd 사용하기 -->
<label for="color">type=color의 selectionStart 속성</label>
<input id="color" type="color" />

<!-- 텍스트 인풋 요소에 selectionEnd 사용하기 -->
<fieldset>
  <legend>type=text의 selectionEnd 속성</legend>
  <label for="pin">Input PIN</label>
  <input type="text" id="pin" value="impossible PIN: 102-12-145" />
  <button id="pin-btn" type="button">PIN correction</button>
</fieldset>

const colorEnd = document.getElementById("color");
const text = document.querySelector("#pin");
const pinBtn = document.querySelector("#pin-btn");
const validPinChecker = /[^\d{3}-\d{2}-\d{3}]/g;
const selectionEnd = text.value.length;
const selectedText = text.value.substring(text.selectionStart, selectionEnd);

pinBtn.addEventListener("click", () => {
  const correctedText = selectedText.replace(validPinChecker, "");
  text.value = correctedText;
});

// 결과를 확인하기 위해 브라우저의 콘솔을 확인해 보세요
console.log(colorEnd.selectionEnd); // ê²°ê³¼ : null