我正在尝试将一个项目上的jQuery转换为本机JavaScript,部分目的是为了学习更多JS。

下面是一些我具有的代码,当“焦点”和“模糊”使它再次变小时,它会扩展文本区域。

它工作得很好,除了在加载DOM之后将一个textarea字段插入DOM之外之外,如何在不使用jQuery的情况下使其也适用于这些项目呢?

(function() {

    var descriptions = document.querySelectorAll('.edit_description');

    for (var i = 0; i < descriptions.length; i++){
        descriptions[i].addEventListener('blur', handler, false);
        descriptions[i].addEventListener('focus', handler, false);
    }

    //descriptions.addEventListener('blur', handler, false);
    //descriptions.addEventListener('focus', handler, false);

    function handler(event) {
        if (event.type === "blur") {
            // It's a blur event
            this.setAttribute("style","height:18px;");
            this.style.height = "18px";
        }
        else {
            // It must be a focus event
            this.setAttribute("style","height:10em;");
            this.style.height = "10em";
        }
    }
})();

这个jQuery版本非常完美,即使对于已加载DOM之后添加的文本字段,这也是我需要重现的内容,但是在不依赖其他库(例如jQuery)的本机JavaScript中。...

$(document).on("focus", "textarea.edit_description", function() {
    $(this).addClass("expanding")
    $(this).animate({
        height: "10em"
    }, 500);
});
$(document).on("blur", "textarea.edit_description", function() {
     $(this).animate({
         height: "18px"
     }, 500);
     $(this).removeClass("expanding")
});

===============>>#1 票数:2 已采纳

将处理程序附加到文档并检查event. target event. target以查看其是否具有适当的类。

 function handler(e) { // check that the event target has the desired class if (e.target.classList.contains("edit-description")) { console.log("%s %o", e.type, e.target); } } // add handlers using the useCapture argument document.addEventListener("blur", handler, true); document.addEventListener("focus", handler, true); // add another input to the DOM var input = document.createElement("input"); input.id = "b"; input.className = "edit-description"; document.body.insertBefore(input, document.body.children[1]); 
 <input id="a" class="edit-description"> 

请注意,我们为addEventListener() useCapture参数指定了true 对于事件委托(在这种情况下),这是必需的,因为blurfocus不会使事件冒泡。

另请参阅: Element. classList Element. classList

===============>>#2 票数:2

为什么要为此使用javascript? 您是否反对CSS解决方案? 您可以使用:focus选择器定位目标元素:

 .edit-description { height: 1em; display: block; } .edit-description:focus { height: 10em; } 
 <textarea class="edit-description"></textarea> <textarea class="edit-description"></textarea> <textarea class="edit-description"></textarea> 

  ask by JasonDavis translate from so

未解决问题?本站智能推荐: