如何从textarea长度下拉输入长度?

时间:2019-01-16 20:55:47

标签: javascript jquery html ajax html5

如何从textarea长度中删除输入长度并显示左侧的单词?

这就是我想要做的:
输入和文本区域的总长度200

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

在输入中添加了10个单词。

     

现在将textarea最大长度设置为190。

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

并在此处显示还剩下多少个单词

1 个答案:

答案 0 :(得分:0)

类似的事情:

我不确定您是否还想将输入限制为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>