时间戳

首页 > 解决方案 > 换行 TextArea 默认值

javascript - 换行 TextArea 默认值

问题描述

我有一个带有默认值的表单 TextArea，不幸的是有时它很大。我怎样才能使表单扩展到文本的大小？现在，我的表单输入ADI被截断，所以我看不到所有的文本。

            <div style={{width: '50rem', margin: '1rem', overflow: 'auto'}}>
                <Header as='h2' textAlign='center' style={styles.mainHeader}>CMS View</Header>

                <Segment raised className='magentaSegment'>

                    <Form style={{paddingBottom: '2.5em'}} error={this.props.networksHasErrored}>
                        <Form.Group widths='equal'>
                        </Form.Group>
                        <Form.TextArea fluid label='ADI' value = {cmsObj.ADI}  style={styles.normalColor} />

                    </Form>
                </Segment>
            </div>

标签： javascriptreactjs

解决方案

您可以使用 textarea 的 rows、cols 和 wrap 属性。您可以为行和列设置固定值，然后如果文本仍然大于给定的行和列组合，则会出现自动滚动条。

如果您希望您的 texarea 增长取决于文本并且不想要滚动条，那么您必须通过计算文本中的字符总数来动态设置行。

function calculateRows(text){
  if(!text)
  return 1;

  return  Math.ceil(text.length/10);
}
const rows = calculateRows(text)
<textarea id="story" name="story" rows={rows} cols="10">

推荐阅读