HTMLInputElement: selectionStart プロパティ

<!-- selectionStart を非テキスト入力要素で使用 -->
<label for="color">selectionStart プロパティを type=color に設定</label>
<input id="color" type="color" />

<!-- selectionStart をテキスト入力要素で使用 -->
<fieldset>
  <legend>selectionStart プロパティを type=text に設定</legend>
  <label for="statement">テキスト内の 'mdn' を選択してください : </label>
  <input
    type="text"
    id="statement"
    value="The mdn is a documentation repository." />
  <button id="statement-btn">Select mdn text</button>
</fieldset>

const inputElement = document.getElementById("statement");
const statementBtn = document.getElementById("statement-btn");
const colorStart = document.getElementById("color");

statementBtn.addEventListener("click", () => {
  inputElement.selectionStart = 4;
  inputElement.selectionEnd = 7;
  inputElement.focus();
});

// ブラウザーコンソールを開いて出力を確認してください
console.log(colorStart.selectionStart); // Output : null