Перевод событий .one и .on из JQuery в JavaScript - PullRequest
Новая
       41

Перевод событий .one и .on из JQuery в JavaScript

0 голосов
/ 24 декабря 2018

Я нашел этот фрагмент кода для управления информацией из текстовых полей: 

// 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;
    });

По этой ссылке: https://codepen.io/vsync/pen/frudD

Я хотел бы перевести эти строки наверсия JavaScript.

Любая помощь?Заранее спасибо!

1 Ответ

0 голосов
/ 24 декабря 2018

удалите .autoExpand из focus.autoExpand или input.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;
  })
})
...