使用jQuery选择器替代querySelector后textarea自动调整高度功能失效

你遇到的问题核心是原生DOM元素和jQuery包装对象的区别，我来帮你拆解清楚：

为什么修改后功能失效？ #

• document.querySelector('.my-singlep-form-txtarea') 返回的是原生DOM元素对象，它自带scrollHeight这个原生属性，能正确获取文本内容的实际高度。
• 而$('.my-singlep-form-txtarea') 返回的是jQuery包装对象，这是jQuery对原生元素的封装集合，它本身并没有scrollHeight属性。当你继续用text_area.scrollHeight时，会得到undefined，导致循环的判断条件永远不成立，自然不会执行高度调整的逻辑。

两种修复方案 #

方案1：从jQuery对象中取出原生DOM元素 #

直接在jQuery对象后加[0]或者.get(0)，拿到集合中的第一个原生元素，这样后续代码可以保持原有逻辑不变：

jQuery(function ($) { 
  let button = "#single_p_submit_btn"; 
  // 取出jQuery集合中的第一个原生DOM元素
  let text_area = $('.my-singlep-form-txtarea')[0]; 
  $(text_area).keydown(function () { 
    $(button).removeClass('my-singlep-btn').addClass('my-singlep-btn-active'); 
    while ($(text_area).outerHeight() < text_area.scrollHeight + parseFloat($(text_area).css("borderTopWidth")) + parseFloat($(text_area).css("borderBottomWidth")) && $(text_area).outerHeight() < 81 ) { 
      $(text_area).height($(text_area).height() + 1); 
    } 
  }); 
});

方案2：全程使用jQuery对象并兼容原生属性 #

如果想保留text_area作为jQuery对象，需要在用到原生属性时，先取出对应的原生元素：

jQuery(function ($) { 
  let button = "#single_p_submit_btn"; 
  let text_area = $('.my-singlep-form-txtarea'); 
  text_area.keydown(function () { 
    $(button).removeClass('my-singlep-btn').addClass('my-singlep-btn-active'); 
    // 获取原生DOM元素
    const nativeTextArea = text_area[0];
    while (text_area.outerHeight() < nativeTextArea.scrollHeight + parseFloat(text_area.css("borderTopWidth")) + parseFloat(text_area.css("borderBottomWidth")) && text_area.outerHeight() < 81 ) { 
      text_area.height(text_area.height() + 1); 
    } 
  }); 
});

小提示 #

jQuery对象本质是一个类数组的集合，里面包含了选中的原生DOM元素。当你需要使用原生DOM的属性（比如scrollHeight、value）或方法（比如focus()）时，必须先从jQuery对象中取出对应的原生元素才能调用哦。

内容的提问来源于stack exchange，提问作者Chriz74