Question

我正在使用此脚本

 jQuery.each(jQuery('textarea[data-autoresize]'), function() {
     var offset = this.offsetHeight - this.clientHeight;

     var resizeTextarea = function(el) {
         jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
     };

     jQuery(this).on('keyup input', function() {
         resizeTextarea(this); }).removeAttr('data-autoresize'); 
     });
  });

，这是我的HTML

<h:inputTextarea id="newUserIds" value="#{surveyAction.newUsers}"
 cols="41" rows="10" onkeyup="AutoGrowTextArea(this)"
styleClass="animated">
   <p:ajax event="blur" process="@this" immediate="true" />
</h:inputTextarea>

如何在javascript上定位特定的textarea，以便该操作仅适用于此。

Answer 1

您当前的选择器找不到您的textarea元素。

将jQuery选择器从textarea[data-autoresize]更改为#newUserIds，或更改textarea标记并添加属性data-autoresize（推荐）：

<h:inputTextarea id="newUserIds" value="#{surveyAction.newUsers}" cols="41" rows="10" onkeyup="AutoGrowTextArea(this)" styleClass="animated">

Answer 2

使用内容可编辑div代替。要将值设置为后端组件，请使用input type =“hidden”字段。

请参阅 - http://jsfiddle.net/gy6gdn59/6/

CSS -

.resizable{
    overflow-x:auto;
    border:1px solid #AAA;
    min-height: 50px;
    resize: both;
}

标记 -

<div contenteditable="true" class="resizable" id="resizablePseudoInput">
</div>

Textarea autogrow onkeyup

2 个答案: