将 .one 和 .on 事件从 JQuery 翻译成 JavaScript

Question

我找到了这段代码来管理文本区域的高度：

// Applied globally on all textareas with the "autoExpand" class
$(document)
    .one('focus.autoExpand', 'textarea.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.autoExpand', 'textarea.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0, rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

来自这个link：https://codepen.io/vsync/pen/frudD

我想将这些行翻译成 JavaScript 版本。

有什么帮助吗？提前致谢！

Answer 1

从 focus.autoExpand 或 input.autoExpand 中删除 .autoExpand 因为它不是有效的事件并试试这个。

document.querySelectorAll('textarea.autoExpand').forEach(function(item) {
  // .one
  item.addEventListener('focus', function(e) {
    console.log('called once')
    var savedValue = this.value;
    this.value = '';
    this.baseScrollHeight = this.scrollHeight;
    this.value = savedValue;
    // remove event after called once
    item.removeEventListener(e.type, arguments.callee);
    // e.type is current event or "focus"
    // arguments.callee is current callback function
  })
  // .on
  item.addEventListener('input', function(e) {
    var minRows = this.getAttribute('data-min-rows') | 0, rows;
    this.rows = minRows;
    rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
    this.rows = minRows + rows;
  })
})

将 .one 和 .on 事件从 JQuery 翻译成 JavaScript

Translating .one and .on events from JQuery to JavaScript

javascript

jquery

equivalent