如何用内容改变文本区域的高度？

Posted 2023-02-21

【中文标题】如何用内容改变文本区域的高度？

【英文标题】：How to change the height of textarea with content?

【发布时间】：2018-03-31 09:44:17

【问题描述】：

我正在尝试根据内容高度更改文本区域的高度。我看到事件处理程序不会改变高度，因为它被引导样式覆盖。请帮忙！

class PostForm extends React.Component 
  constructor(props)
    super(props);
    this.state = titleHeight: '30', storyHeight: 1;                                                    
    this.handleKeyUp = this.handleKeyUp.bind(this);
  
  handleKeyUp(event)
    this.setState(titleHeight: document.getElementById('post_title').scrollHeight);
    this.setState(storyHeight: document.getElementById('post_story').scrollHeight);
  
  render () 
        var csrfToken = $('meta[name=csrf-token]').attr('content');
        return (
          <form action='create' method='post' acceptCharset='UTF-8' className= "form-group">
            <input type='hidden' name='_method' value='patch'/>
            <input type='hidden' name='utf8' value='✓' />
            <input type='hidden' name='authenticity_token' value=csrfToken />
            <textarea id="post_title" name="post[title]" className="form-control boldText" style=formStyle.textArea height=this.state.titleHeight onKeyUp=this.handleKeyUp placeholder="Title"/>
            <textarea id="post_story" name="post[story]" className="form-control" style=formStyle.textArea height=this.state.storyHeight onKeyUp=this.handleKeyUp placeholder="Start telling the story"/>
            <input name="commit" type="submit" value="Post" className="btn" style=formStyle.button/>
          </form>
        );
  


const formStyle = 
  textArea: 
    border: 5,
    boxShadow: 'none',
    margin: 5,
    overflow: 'hidden',
    resize: 'none',
    ariaHidden: 'true',
  ,
  button: 
    backgroundColor: 'black',
    color: 'white',
    width: 70,
    marginLeft: 18,
    marginRight: 5,
  ,

【参考方案1】：

这段代码可以改变文本区域的高度，即使它最初有一些文本，甚至在任何改变之后:)

export default class dynamicTextArea extends Component 
    constructor(props)
        super(props);

        this.textAreaRef = React.createRef();
    

    componentDidMount() 
        this.textareaChange(this.textAreaRef.current);
    

    textareaChange(ta) 
        ta.style.height = "auto";
        ta.style.height = ta.scrollHeight + "px";
    

    render() 
        return(
            <textarea
                ref=this.textAreaRef
                onChange=(e) => this.textAreaChange(e.target)
            />
        );
    

如果您想进一步降低初始高度，请更改：

ta.style.height = "auto";

到

ta.styel.height = "30px"; // better if equal to line-height

【参考方案2】：

你可以用ref属性做你想做的事

export default class Textarea extends Component 

  componentDidMount () 
    if (this.multilineTextarea) 
      this.multilineTextarea.style.height = 'auto';
    
  

  changeTextarea = () => 
    this.multilineTextarea.style.height = 'auto';
    this.multilineTextarea.style.height = this.multilineTextarea.scrollHeight + 'px';
  

  render () 
    return (
      <textarea
        onChange=this.changeTextarea
        ref=ref => this.multilineTextarea = ref
      />
    );
  

Also here is working DEMO

【参考方案3】：

textarea html component 没有属性 height，但有一个属性 rows 可用于该目的（例如 <textarea rows=Math.round(this.state.storyHeight) ... />）。

没有 CSS 样式会覆盖您在 style 属性中传递的内容，它的工作方式相反。但是无论如何，您的formStyle 定义中没有height。