<div id="overall-background"></div>
<main>
  <div class="field">
    <label for="text">你对这个测试有什么问题吗</label>
    <input type="text" name="text" id="text" autocomplete="off">
  <button class="button" id="submit">下一步</button>
  </div>
</main>

.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#text {
  font-size: 16px;
  padding: 10px;
  border-radius: var(--border-radius);
  border: 0;
  background: #ffffff77;
  
  &:focus {
    outline: 1px solid var(--color-pink);
    outline-offset: 2px;
  }
}

.button.-clicked {
  background-color: #7f0000;
}

.button:disabled {
  cursor: not-allowed;
}

const text = document.querySelector('#text') as HTMLInputElement;
const submit = document.querySelector('#submit') as HTMLButtonElement;

const PREDEFINED = '我原谅你了。你进来吧。';

const handleChange = (e: ChangeEvent<HTMLInputEvent>) => {
  const value = e.target.value;
  const length = value.length;
  
  e.target.value = PREDEFINED.slice(0, length);
  
  if (length === PREDEFINED.length) {
    text.setAttribute('disabled', 'true');
    submit.setAttribute('disabled', 'true');
    submit.innerText = '我进来了';
    submit.classList.add('-clicked');
  }
}

text.oninput = handleChange;