Как я могу раскрыть длину ввода от длины текстовой области?

Question

Как можно уменьшить длину ввода с длины текстовой области и отобразить оставленные слова?

Вот что я хочу сделать:
общая длина для ввода и текста 200

<input type="text" id="b" name="b" value="Hi world !" maxlength="50">

Добавлено 10 слов для ввода.

Теперь установите maxtangth textarea равным 190.

<textarea name="message" rows="10" cols="30" maxlength="190"></textarea>

и покажите, сколько слов осталось

Answer 1

Примерно так:

Я не был уверен, хотите ли вы ограничить ввод 50 символами.

let max = 200;
const a = document.querySelector('#a'); // input
const b = document.querySelector('#b'); // textarea 
const c = document.querySelector('#c'); // output

a.addEventListener('input', e => {
    //  update textarea max length
    b.maxLength = max - a.value.length;

    //  update characters left
    c.textContent = max - a.value.length - b.value.length;
})
b.addEventListener('input', e => {
    //  use this if you don't want to limit the input
    //  update input max length
    //  a.maxLength = max - b.value.length;

    // use this if you want to limit the input to 50 or less
    // (if textarea has more than 150 characters)
    a.maxLength = Math.min(max - a.value.length, 50);

    //  update characters left
    c.textContent = max -  a.value.length - b.value.length;
})

//  initial characters left
c.textContent = max;

input,
textarea { 
  border: 1px solid #ccc; 
  width: 50%; 
  margin:5px 0;
  font-size: 16px;
}

<input id="a" maxlength="50" />
<textarea id="b" rows="4" maxlength="200"></textarea>
<p>Characters left: <output id="c"></output></p>