使用按钮添加到 textarea maxlength

Question

我一直在尝试使用 javascript 通过按钮添加到 textarea 的最大长度。它目前所做的是计算您可以输入的剩余字符数。我希望它也有一个可以添加 20 的按钮。但是，该按钮不会将 20 添加到最大长度。这是我的代码：

Javascript：

var el_t = document.getElementById('textarea');
var length = el_t.getAttribute("maxlength");
var el_c = document.getElementById('count');
el_c.innerHTML = length;
el_t.onkeyup = function () {
  document.getElementById('count').innerHTML = (length - this.value.length);
};
function addLength() {
  document.getElementById('count').innerHTML = (document.getElementById('textarea').maxlength + 20);
}

HTML：

<textarea id="textarea" maxlength="99" placeholder="Type..."></textarea>
<span id="count"></span>
<button onclick="addLength()">Add to character limit!</button>

Answer 1

你很亲密。处理重新计票

Javascript

var el_t = document.getElementById('textarea');
var length = function(){ return el_t.getAttribute("maxlength");};
var el_c = document.getElementById('count');
el_c.innerHTML = length();

el_t.onkeyup = function () {
  document.getElementById('count').innerHTML = (length() - this.value.length);
};

function addLength() {
  var count = parseInt(length()) + 20;
  document.getElementById('count').innerHTML = count;
  el_t.setAttribute("maxlength",count);
  triggerEvent(el_t,"keyup");
}

function triggerEvent(el, type){
   if ('createEvent' in document) {
        // modern browsers, IE9+
        var e = document.createEvent('HTMLEvents');
        e.initEvent(type, false, true);
        el.dispatchEvent(e);
    } else {
        // IE 8
        var e = document.createEventObject();
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
    }
}

HTML

<textarea id="textarea" maxlength="99" placeholder="Type..."></textarea>
<span id="count"></span>
<button onclick="addLength()">Add to character limit!</button>

Answer 2

maxLength 属性应该有一个大写的 L，而你的有一个小写的 l。这是一个例子：

HTML

<textarea col='30' rows='4' maxlength='50' id='t1'></textarea>
<button onclick='maxchange()'>SUBMIT</button><br>
<div id='d1'></div>

Javascript

function maxchange() {
  document.getElementById('t1').maxLength +=5;
  document.getElementById('d1').innerHTML=document.getElementById('t1').maxLength;
}