Question

我正在尝试创建一个包含文本的简单文本框。我在网上看过，但没有任何对我有用。这是我的TextBox.css文件

div.TextBox {
position: relative; 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) 
}

.TextBox-input {}

这是我的TextBox.js文件

import React, { PropTypes } from 'react';
import withStyles from '../../decorators/withStyles';
import styles from './TextBox.css';

@withStyles(styles)
class TextBox {

  static propTypes = {
    maxLines: PropTypes.number
  };

  static defaultProps = {
    maxLines: 1
  };

  render() {
    return (
      <div className="TextBox">
        {this.props.maxLines > 1 ?
          <textarea {...this.props} className="TextBox-input" ref="input" key="input" rows={this.props.maxLines} /> :
          <input {...this.props} className="TextBox-input" ref="input" key="input" />}
      </div>
    );
  }

}

export default TextBox;

Answer 1

你的CSS有点失控。您出于某种原因指定了position两次，并且我不清楚您要完成的是什么。你能详细说明吗？

无论如何，我相信您的问题是您使用的是position: absolute，而您没有指定宽度或高度。尝试添加width: 100%，height: 100%，您至少应该在屏幕上看到一些内容。

您并不总是需要宽度和高度，但由于绝对定位会从页面的正常流程中删除元素，因此浏览器需要了解绘制它的位置。有时你希望元素占用所有可用空间，你可以通过将所有四个边指定为0来实现，以便“拉伸”元素：

top: 0;
bottom: 0;
left: 0;
right: 0;

Answer 2

你的问题不是很清楚。首先，如果您尝试通过CSS将“文本”添加到文本框中，则不能使用CSS来设置HTML元素的样式。

使用像jQuery这样的东西你可以生成带有指定文本的文本框，这是一个例子：

https://jsfiddle.net/fvk2v1so/7/

用户可以在文本字段中输入内容，然后按“添加文本框” “它将添加带有该文本的文本区域元素作为值。

 $('.add_button').on('click', function(e){
    //When user clicks "add textbox" ensure they have added text.
    if(!$('.add_text').val().length){
        $('.error').show();
    }
    //If there is text, append textbox with text to results div.
    else{
        //Hide error message
        $('.error').hide();

        $('.results').append('<textarea class="textbox">' + $('.add_text').val() + '</textarea>')
    }
});

再一次，不确定你具体问的是什么，但希望这可以帮助你走上正轨？

我在将文本添加到css中的文本框时遇到问题

2 个答案: