聚合物，在 ajax 形式的纸张输入上使用多行属性

Question

我尝试在 ajax-form 元素中制作多行纸张输入

#info {
   width: 90%;
   height: 300px;
   background-color: white;
   padding: 10px;
   margin: 20px auto;
 }

paper-input {
  width: 100%;
  height: 150px;
}

<div id="info">
   <form is="ajax-form"  action="../../../back/saveIMG.php" class="picturePost" method="post" enctype="multipart/form-data">

     <file-input camera name="pic" id="pic">
       <core-icon-button
                         icon="image:camera-alt">
       </core-icon-button>
     </file-input>
     <br/>
     <paper-input multiline id="last" floatingLabel label="Commentaire" ></paper-input>
     <!-- -->
     <br/>
     <input type="submit" name="submitInfo">
   </form>
</div>

所以我添加了一些属性，如 maxRows="5" 和 rows="3" 但我的纸张输入不可能总是单行区域。

Answer 1

您应该考虑使用 paper-input-decorator with paper-autogrow-textarea

而不是使用 paper-input

<div id="info">
    <form is="ajax-form"  action="../../../back/saveIMG.php" class="picturePost" method="post" enctype="multipart/form-data">

        <file-input camera name="pic" id="pic">
            <core-icon-button icon="image:camera-alt"></core-icon-button>
        </file-input>
        <br/>
        <paper-input-decorator id="last" label="Commentaire">
            <paper-autogrow-textarea rows="3" maxRows="5">
                <textarea></textarea>
            </paper-autogrow-textarea>
        </paper-input-decorator>
        <!-- -->
        <br/>
        <input type="submit" name="submitInfo">
    </form>
</div>

Answer 2

而不是 paper-input 尝试使用 iron-autogrow-textarea:

<iron-autogrow-textarea id="last" rows="3" maxRows="5" bind-value="{{xyz}}">
</iron-autogrow-textarea>

文档：https://elements.polymer-project.org/elements/iron-autogrow-textarea

聚合物，在 ajax 形式的纸张输入上使用多行属性

Polymer, use multiline attribute on paper-input in ajax-form

polymer